<div class="box"
v-for="(item, index) in list"
@click="remove(index)"
:key="item"
>
</div>
</fade-transition>
</div>
...
「完整事例地址：https://codesandbox.io/s/pk9r5j2257?from-embed 」
[文档中][6]介绍了一个带有transition-group元素的警告。我们基本上必须在元素离开时将每个项目的定位设置为absolute，以实现其他项目的平滑移动动画。我们也必须添加一个move-class并手动指定过渡持续时间，因为没有用于移动的 JS hook。我们将这些调整添加到我们的上一个示例中。再做一些调整，通过在mixin中提取 JS 逻辑，我们可以将其应用于轻松创建新的transition组件，只需将其放入下一个项目中即可。
Vue Transition
在此之前描述的所有内容基本上都是这个小型 [transition 集合][7]所包含的内容。它有 10 个封装的transition组件，每个约1kb(缩小)。我认为它非常方便，可以轻松地在不同的项目中使用。你可以试一试:)
总结
我们从一个基本的过渡示例开始，并最终通过可调整的持续时间和transition-group支持来创建可重用的过渡组件。我们可以使用这些技巧根据并根据自身的需求创建自己的过渡组件。希望读者从本文中学到了一些知识，并且可以帮助你们建立功能更好的过渡组件。
到此这篇关于在Vue中创建可重用的 Transition的方法的文章就介绍到这了,更多相关vue创建Transition内容请搜索软件开发网以前的文章或继续浏览下面的相关文章希望大家以后多多支持软件开发网！
