Focus transition animation for outline not working when Unfocusing HTML Input-CodePudding

I have a basic input that I am trying to have a nice outline highlight for, but for whatever reason the unfocus animation does not happen.

What am I missing here?

I even commented out the all: unset so that I can explicitly set outline: transparent to give the normal stat, in hopes that was the fix.

Any tips would be a huge help!

Cheers!

Codesandbox Link: https://codesandbox.io/s/custom-input-yo98mc?file=/src/components/CInput.vue

CInput

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

CodePudding user response：

Instead of outline: none set it like 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  :value="value" />
</div>