Блог

Главная - Вопросы по программированию - Vue.js: как сделать так, чтобы переходная группа срабатывала только один раз?

Vue.js: как сделать так, чтобы переходная группа срабатывала только один раз?

#vue.js #vuejs2

Вопрос:

У меня есть этот Vue transition-group ниже. Это работает правильно, но проблема в том, что когда какой-либо элемент в цикле обновляется ( hash изменяется, что используется для ключа), группа перехода запускает анимацию для этого обновленного элемента (каждый раз, когда он обновляется).

Мне нужно, чтобы он анимировал элементы только один раз, когда они добавляются в items массив (элементы добавляются с items.unshift(newItem) )

 <transition name="notification-transition">
  <custom-component
    v-for="item in items"
    :key="'item-'   item.hash"
  ></custom-component>
</transition>
 
 .notification-transition-enter-active {
  transition: all 0.5s ease;
}

.notification-transition-leave-active {
  transition: all 0s ease;
}

.notification-transition-enter,
.notification-transition-leave-to {
  opacity: 0;
  transform: translateX(256px);
}

В документах Vue упоминается, что он запускается «при вставке, обновлении или удалении элементов из DOM», но ничего не говорится о том, как ограничить его только inserted removed событием and.

Ответ №1:

Я нашел проблему. Это повторно запускает переход , потому что свойство item.hash , используемое для ключа, изменяется. Я должен использовать какое-то статическое свойство ключа, которое не меняется

 <transition name="notification-transition">
  <custom-component
    v-for="item in items"
    :key="'item-'   item.staticHash"
  ></custom-component>
</transition>
Метки: ,