Почему transition-group не работает?

Question

[Павел Клешнин]

Есть меню - рендерится из массива объектов в $el.data
При клике у всех элементов убирается флаг isActive, потом массив фильтруется (это делал специально, т.к. думал, что при сортировке может не быть анимации), и дальше удаленный элемент со флагом isActive вставляется в начало массива.
Но анимация работает только если менять существующие значения свойств этого элемента. В чём здесь может быть загвоздка?
Делал всё, как написано в доке (и со splice по индексу заменять пробовал) - работает только один вариант.

template

<template>
  <v-toolbar dense color="#195d6a">
    <transition-group name="list" tag="div" class="toolbar-wrapper">
      <p v-for='comp in links'
            :key="comp.name"
            :class="{'selected': comp.isActive}"
            @click="setActive(comp)">
            <router-link :to="comp.name" :key="comp.name">
            {{comp.text}}
            </router-link>
      </p>
    </transition-group>
  </v-toolbar>
</template>

data, methods

data() {
      return {
        links: [
          { name: '/dashboard', text: 'Панель управления', isActive: true },
          { name: '/table', text: 'Таблица', isActive: false },
          { name: '/ratesSetter', text: 'Тарифы', isActive: false },
          { name: '/chart', text: 'График', isActive: false },
          { name: '/logsBook', text: 'Журнал', isActive: false },
        ],
      }
    },
    methods: {
      setActive(comp) {
        let clicked;
        // Удаляем isActive: true у предыдущего активного элемента
        this.links = this.links.map(it => {
          return it.name === comp.name ? {...it, isActive: true} : {...it, isActive: false}
        });
        // Удаляем элемент
        this.links = this.links.filter(it => {
          if (it.name !== comp.name) {
            return true;
          } else clicked = it
        });

        // И вставляем в начало

        /* this.links.unshift(clicked) */ // Так анимация не работает
        /* this.links = [clicked, ...this.links]*/ // Так тоже

        // this.links = [                           // Не работает
        //   {
        //     ...clicked,
        //     toMakeAnimWork: Math.random()
        //   },
        //   ...this.links
        // ];

        // this.links.unshift({                    // И так ничего не работает
        //   text: clicked.text,
        //   name: clicked.name,
        //   isActive: clicked.isActive});


        //А вот так работает
        this.links.unshift({
          text: clicked.text,
          name: clicked.name + 'fff',
          isActive: clicked.isActive
        });
      },

css

.list-enter-active, .list-leave-active {
    transition: all .5s;
  }
  .list-enter, .list-leave-to {
    opacity: 0;
    transform: translateY(-50px);
  }
  .v-toolbar {
    font-family: Montserrat, Arial, sans-serif;
    font-size: 1.2rem;
  }
  .toolbar-wrapper {
    display: flex;
  }
  a {
    text-decoration: none;
    color: #95d9e5;
    transition: background-color .2s;
    padding: 13px 18px;
  }
  a:hover {
    color: #fff;
    background: #30b0c7;
  }
  p.selected a {
    color: rgba(255,255,255, .5);
  }

Answer 1

[Владимир Сартаков]

Если поменяете :key="comp.name" на :key="comp.isActive", то заработает.
Ключи vue использует для сопоставления данных и dom элементов из которых они генерируются. Поэтому анимации не знают момент перерисовки и не запускается
Можно составные ключи делать:
:key="comp.name + comp.isActive "

Comments

[Павел Клешнин]

Помогло, спасибо за объяснение!

Answer 2

[0xD34F]

С помощью классов *-enter-active, *-leave-active и т.д. анимируются удаляемые/добавляемые элементы. Если key не изменился, элемент не будет удалён и заново добавлен, соответственно, и классы не будут добавляться.

Comments

[Павел Клешнин]

Получается, неважно что я удаляю элемент из массива - нужно именно изменить key?

[0xD34F]

Павел Клешнин, не получается.

Ничего вы из массива не удаляете (если только про код не наврали).

Нужно или нет - я без понятия. Вы почему-то предпочли умолчать о том, что пытаетесь сделать.

[Павел Клешнин]

0xD34F, Умолчать о том, что пытаюсь сделать? Наверное, если название вопроса "Почему transition-group не работает?" - сделать так, чтобы он работал и понять, почему.
Если links = links.filter для вас не удаление элемента из массива, то что это тогда? Можно придраться к формулировке, мол, присваиваю заново значение, но, как я упомянул в вопросе, со splice (который именно удаляет) получается абсолютно идентичная ситуация

[0xD34F]

Павел Клешнин, какая там у вас ситуация - неизвестно. "Не работает" - это разговор ни о чём. Следует рассказывать, что вы ожидаете получить, и что получается реально - а не ждать, что кто-то догадается. Ведь возможны варианты - со сменой key, и без. Очевидно, поведение различается. "Придраться" - можете называть это и так, но факт в том, что вы не знаете основ js. А если не придираться, то... Всё равно удаления не было (с точки зрения vue) - потому что вы сразу же элемент добавили обратно, с тем же key.

[Павел Клешнин]

0xD34F, интересно, как это не было удаления, если я "сразу же элемент добавил обратно"? С точки зрения js я удалил элемент, а вопрос мой был как раз по поведению Vue, некоторых основ которого я могу и не знать, но выводы про мои знания "основ js" - это ваши домыслы. Да и "не работает" - нормальный разговор, если есть конкретный пример. Если есть transition-group, задача которого - удалять/добавлять классы для переходов/анимаций, и он не работает (не добавляет классы) - значит, нужно сделать так, чтобы работал (добавлял). Вы же ответили на вопрос (и не вы один) - значит поняли, что я имею ввиду.

[0xD34F]

Павел Клешнин,

как это не было удаления, если я "сразу же элемент добавил обратно"?

Vue не выполняет рендеринг сразу же после изменения данных.

С точки зрения js я удалил элемент

Нет. Фильтрация + присваивание удалением не является. Так что никаких домыслов, говорю как есть.

"не работает" - нормальный разговор, если есть конкретный пример

Нет, не нормальный. Ещё раз - задавая вопрос, следует рассказывать, какого поведения вы пытаетесь добиться. Да и "конкретного примера" не было - так, огрызки кода. "Конкретный пример" - это ссылка на песочницу.

поняли, что я имею ввиду

Чё-то смеюсь. До сих пор без понятия, чего вам надо было.