VueJS转换为计算值

Question

我想使用可以过滤的帖子为块设置动画。

[某些过滤器触发计算方法filteredPosts，并将它们分配给组件<block-article :posts="filteredPosts" />

在我的<block-article>组件中，我有类似的内容：

<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是一个网格，在这里我失去了网格行为。

THE AIM是整个div .posts的动画，而不是v-for的每个元素的动画。

任何想法？

谢谢，

Answer 1

如果为整个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>

Answer 2

我终于用：]实现了

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

问题是posts.length不变时，但在很多情况下都可以使用。我将搜索如何解决此异常。