Анимация перехода фокуса для контура не работает при расфокусировке ввода HTML

У меня есть базовый ввод, для которого я пытаюсь выделить красивый контур, но по какой-то причине анимация unfocus не происходит.

Что мне здесь не хватает?

Я даже закомментировал all: unset, чтобы я мог явно установить outline: transparent, чтобы дать нормальную статистику, в надежде, что это исправит.

Любые советы будут огромной помощью!

Ваше здоровье!

Ссылка на Codesandbox: https://codesandbox.io/s/custom-input-yo98mc?file=/src/components/CInput.vue

CВход

<template>
  <input class="c-input" :value="value" />
</template>

<script lang="ts">
import { defineComponent } from 'vue';

export default defineComponent({
  props: {
    value: { type: String, default: '' },
    color: { type: String, default: '#AB92F0' },
  }
  ,
  setup(){

  }
})

</script>
<style lang="sass">
.c-input
  // all: unset
  border: none
  outline: none
  display: flex
  min-width: 200px
  width: 100%
  font-size: 36px
  padding: 14px
  border-radius: 6px
  background-color: white
  transition: all 300ms ease-in-out
  &:focus
    outline: 4px solid red
</style>
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Введение в технологический стек Twitch
Введение в технологический стек Twitch
В этой статье мы подробно рассмотрим стек Twitch, который подразделяется на следующий набор технологий:
8 полезных HTML-тегов, которые лучше использовать вместо <div>
8 полезных HTML-тегов, которые лучше использовать вместо <div>
Когда я только начинал изучать html, я использовал div для всего, это был один из первых тегов, которые я выучил, и казалось, что он работает в любой...
HTML5: API локального хранилища (Local Storage)
HTML5: API локального хранилища (Local Storage)
LocalStorage - это простой способ хранения данных в браузере пользователя.
Доступность HTML - программирование с инклюзивной перспективой
Доступность HTML - программирование с инклюзивной перспективой
Представьте, что вы хотите поехать на пляж. Представьте, что вы упорно трудились весь год и заслужили это. Прибыв на место, вы обнаруживаете, что...
Именование классов CSS: Конвенция именования BEM
Именование классов CSS: Конвенция именования BEM
Сопровождаемость кода, сама по себе, является пульсирующим эффектом нескольких факторов. Когда часть программного обеспечения читабельна, ясна,...
0
0
15
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вместо outline: none установите его как outline: 4px solid transparent:

const app = Vue.createApp({
 props: {
    value: { type: String, default: '' },
    color: { type: String, default: '#AB92F0' },
  },
})
app.mount('#demo')
.c-input {
  border: none;
  outline: 4px solid transparent;
  display: flex;
  min-width: 200px;
  width: 100%;
  font-size: 36px;
  padding: 14px;
  border-radius: 6px;
  background-color: white;
  transition: all 1300ms ease;
 }
 .c-input:focus {
  outline: 4px solid red;
 }
body {
  background: gray;
 }
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>
<div id="demo">
  <input class="c-input" :value="value" />
</div>

Другие вопросы по теме