Unfocusing HTML Input 时轮廓的焦点过渡动画不起作用

Question

我有一个基本的输入，我正在尝试为其添加一个漂亮的轮廓高亮显示，但是由于某种原因 unfocus 动画没有发生。

我在这里错过了什么？

我什至注释掉了 all: unset 这样我就可以明确地设置 outline: transparent 来提供正常的统计数据，希望这是解决方法。

任何提示都会有很大的帮助！

干杯！

CodesandboxLink: 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>

Answer 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>

Unfocusing HTML Input 时轮廓的焦点过渡动画不起作用

Focus transition animation for outline not working when Unfocusing HTML Input

html

css

vue.js

css-transitions