@wufapexef

Почему enter transition не работает с первого раза?

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 - все работает как надо! Нету проблем. Проблема только после билда и деплоя.
  • Вопрос задан
  • 427 просмотров
Пригласить эксперта
Ответы на вопрос 1
kulakoff
@kulakoff Куратор тега Vue.js
Vue.js developing
Вот так попробуйте : <transition name="cc" appear>
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы