Why doesn't enter transition work the first time?

Question

Vue.js

Weird shit is happening.
I have an element that I want to animate

<transition name="cc">
    <span v-if="typeAnimated" class="cc-type" :style="typeStyle"></span>
 </transition>

The bottom line is that the user drives data into the input and the script determines the type of card:

ccType (type) {
      if (type === 'amex' || type === 'dankort' || type === 'diners' || type === 'discover' || type === 'jcb' || type === 'mastercard' || type === 'visa') {
        this.type = type
        let ccTypeImage = require(`assets/images/${this.type}.svg`)
        if (ccTypeImage) {
          this.typeStyle = `background-image: url(${ccTypeImage})`
          this.typeAnimated = true
        }
      } else {
        this.type = false
        this.typeAnimated = false
      }
    }

If it recognizes the type of the map, it loads the svg file with the appropriate name and plays the animation.

.cc-enter-active, .cc-leave-active
  transition: opacity 300ms, transform 300ms

.cc-enter, .cc-leave-to
  opacity: 0
  transform: translateX(10%)

The problem is that the animation does NOT fire when the picture first appears! Enter doesn't work. Leave works.
And if the picture has already been called and loaded, then on subsequent inputs, the animation is shown both on enter and on leave.
At the same time, the most annoying moment is that locally when the project works in Dev - everything works as it should! No problem. The problem is only after build and deploy.

Answer 1

Try it like this:<transition name="cc" appear>