计算值上的 VueJS 转换答案

【问题标题】：VueJS transition on computed values计算值上的 VueJS 转换
【发布时间】：2020-05-26 13:47:33
【问题描述】：

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

一些过滤器触发计算方法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 是一个网格，在这里我失去了网格行为。

目标是动画整个 div .posts 而不是 v-for 的每个元素。

有什么想法吗？

谢谢大家，

【问题讨论】：

精确@StevenB。谢谢它有效，但最后这是一个问题，因为转换不会影响多个过滤器中的帖子，所以我需要为全局 div 设置动画：/
对不起，我刚看到你帖子的底部。如果您希望全局块一起转换，那么您需要使用transition 标签。如果您希望它在初始负载时转换，您可能需要使用<transition name="slide-fade" appear><div class="posts"></div></transition>
Arf 它在我更改过滤器时不起作用，因此在计算过滤后的帖子时。

标签： vue.js transition

【解决方案1】：

如果您为整个 div 设置动画，您应该使用transition，但在这种情况下，所有内部元素都没有动画。如果要为所有内部元素设置动画。你应该使用transition-group

我认为，在您的情况下，需要使用带有内置 tag 属性的所有这些方法。因为在码头你可以阅读 https://vuejs.org/v2/guide/transitions.html

与transition 不同，它呈现一个实际元素：默认情况下为span。您可以更改使用 tag 属性呈现的元素。

所以可以这样写（代码不全，必须加name, key等attrs）

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

【讨论】：

【解决方案2】：

我终于做到了：

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

不是:key="posts.length"

问题是posts.length 没有改变但在很多情况下都有效。我将搜索如何修复此异常。

【讨论】：