Weird shit происходит.
Есть элемент который хочу анимировать
<transition name="cc">
<span v-if="typeAnimated" class="cc-type" :style="typeStyle"></span>
</transition>
Суть в том, что юзер вбивает в инпут данные и скрипт определяет тип карточки:
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
}
}
Если он узнает тип карты, то загружает свг файл с соответсвующим названием и играет анимацию.
.cc-enter-active, .cc-leave-active
transition: opacity 300ms, transform 300ms
.cc-enter, .cc-leave-to
opacity: 0
transform: translateX(10%)
Проблема в том, что анимация НЕ срабатывает при первоначальном появлении картинки! Не срабатывает Enter. Leave срабатывает.
А если картинка уже была вызвана и загружена, то уже при последующих вводах анимация показывается и на enter и на leave.
При этом самый бесячий момент, что локально когда проект работает в Dev - все работает как надо! Нету проблем. Проблема только после билда и деплоя.
