VueJS переход по вычисленным значениям - PullRequest
Новая
       16

VueJS переход по вычисленным значениям

0 голосов
/ 26 мая 2020

Я хочу оживить блок с сообщениями, которые можно фильтровать.

Некоторые фильтры запускают вычисленный метод filteredPosts, и они назначаются компоненту, который <block-article :posts="filteredPosts" />

В my <block-article> component У меня есть что-то вроде этого: 

<template>
    <div class="posts">
      <div v-for="post in posts" :key="post.id"></div>
    </div>
</template>

Я хочу, чтобы div .posts анимировался как нижний / постепенный перевод при исчезновении и верхний / постепенный перевод при появлении.

Я пробовал это: 

<template>
    <transition name="slide-fade">
        <div class="posts">
          <div v-for="post in posts" :key="post.id"></div>
        </div>
    </transition>
</template>

с соответствующими css классами, но это не работает.

Я пробовал это: 

<template>
    <div class="posts">
        <transition-group name="slide-fade">
          <div v-for="post in posts" :key="post.id"></div>
        </transition-group>
    </div>
</template>

но мой класс .posts - это сетка, и здесь я потерял поведение сетки.

ЦЕЛЬ - анимировать весь div .posts, а не каждый элемент v-for.

Есть идеи?

Всем спасибо,

Ответы [ 2 ]

0 голосов
/ 27 мая 2020

Я, наконец, добился этого с помощью: 

<transition name="slide-fade">
    <div :key="posts.length" class="posts"></div>
</transition>

Не :key="posts.length"

Проблема в том, что posts.length не меняется, но во многих случаях работает. Я буду искать, как исправить это исключение.

0 голосов
/ 26 мая 2020

Если вы анимируете весь div, вы должны использовать transition, но в этом случае все внутренние элементы не анимируются. Если вы хотите оживить все внутренние элементы. Вы должны использовать transition-group

В вашем случае, я думаю, нужно использовать весь этот метод со встроенным атрибутом tag. В доке вы можете прочитать https://vuejs.org/v2/guide/transitions.html

В отличие от transition, он отображает фактический элемент: span по умолчанию. Вы можете изменить элемент, отображаемый с помощью атрибута tag.

Таким образом, вы можете написать так (это не полный код, вы должны добавить name, key и другие атрибуты) 

<transition>
     <transition-group tag="div" class="posts">
        <div v-for="post in posts"></div>
    </transition-group>
</transition>
...