Как решить проблему с transition-group?

Question

[ivankirshin]

https://im2.ezgif.com/tmp/ezgif-2-436ed39ab6.gif
Использую transition-group. Добился желаемого эффекта благодаря . ...-move{transition:all 1s}, но как сделать, чтобы перемещение анимировалось лишь при удалении и добавлении?
У меня же получается, что при смене списка элементы в массиве изменяются и анимация также срабатывает.
Подскажите, какими вариантами можно это анимировать
Код компонента
plnkr.co/edit/5EqOwdDJ7SO1F9UkKJNa

Comments

[0xD34F]

Код компонента
plnkr.co/edit/5EqOwdDJ7SO1F9UkKJNa

Это весьма похвально, что вы осознаёте необходимость демонстрации своего кода... Но как насчёт показать вместо этого огрызка что-нибудь рабочее?

[ivankirshin]

0xD34F, Пожалуйста)
Проблема в этом файле: https://github.com/ivankirshin/TodoListVue/blob/te...
https://vue-todolist-adfc4.firebaseapp.com

Answer 1

[0xD34F]

Задайте :key для списка задач в целом, чтобы он рендерился заново при смене активного списка. Например, так:

<transition-group name="trgroup" :key="active.name">

Демо.

Comments

[ivankirshin]

Ой, спасибо большое! Все оказывается так просто, буду знать)
Еще может подскажете, как бы вы решили проблему, которая теперь проявляется, если отметить задачу как завершенную
Я прописал такое в компоненте task.vue. Думаю, что это явно неправильный вариант. Да и ждать таким образом окончание анимации перед удалением из массива тоже странно

methods: {
    deleteTask (id) {
      this.$refs.task.classList.toggle('slide')
      setTimeout(() => this.$store.dispatch('deleteTaskById', id), 700)
    },
    toggleDone (id) {
      this.$refs.task.classList.toggle('slide')
      setTimeout(() => this.$store.dispatch('toggleDone', id), 700)
    },

[0xD34F]

ivankirshin, я бы перенёс класс slide в main.vue, сделал бы его частью анимации (.trgroup-leave-to). Обновил демо.

Зачем таймауты - я не понял.

[ivankirshin]

Понял) действительно, можно было просто вынести все анимации наружу) Таймауты я добавлял, так как элемент удалялся прежде, чем завершится css анимация, если делать средствами вью так не происходит)
Еще один момент. Если я захочу сделать, чтобы при выполнении был слайд вправо, а при удалении влево.
Мне первое, что приходит на ум это установить прослушку этих событий и добавлять соответствующий класс. Верно мыслю?
Почему-то раздел с анимациями мне показался самым менее понятный в документации. Возможно, из-за того, что там примеры с использованием сторонних библиотек

[0xD34F]

ivankirshin,

Еще один момент. Если я захочу сделать, чтобы при выполнении был слайд вправо, а при удалении влево.

Тут сходу не подскажу, надо подумать. Лучше сделайте отдельный вопрос.

[ivankirshin]

0xD34F, Код вот, что сам сделал. Но смущает, что пришлось снова воспользоваться setTimeout(()=>this.$store.dispatch('deleteTaskById', id),0) так как, насколько я понял, иначе добавление класса не успевает отрендериться
Правильно ли я понимаю, что везде, где хочется применить такой подход - значит, все не очень спроектировано или есть вариант проще и надежнее, а такого нужно избегать) Хочется сделать качественно)

[ivankirshin]

0xD34F, Еще вопрос не по теме. Пока я сам выкладывал свой код на этот сайт, то заметил, что вариант с импортом в сам css не работает. Вы же это исправили и вынесли css ко всем скриптам.
Я так делал раньше, но столкнулся с проблемой, что при продакшн сборке импортированные css оказываются в конце билда и имеют приоритет. В Реальных проектах вы это как решаете?

[0xD34F]

ivankirshin, использование setTimeout - это точно костыль, без вариантов. Если проблема в том, что что-то не успевает отрендерится - есть метод nextTick, переданная ему функция будет вызвана после того, Vue обновит DOM-дерево.

Насчёт css - тут я вообще ни разу не специалист, если где какие проблемы со стилями, просто повышаю специфичность интересующих меня селекторов.

[ivankirshin]

0xD34F, Понятно, спасибо большое за ответы) Сколько же нужно еще практики, чтобы научиться все правильно проектировать без костылей в дальнейшем) Ведь метод nextTick также не от хорошего кода возник)