Vue控制组件内的离开动画？
站长
· 阅读数 11
我有一个父级组件A，然后子组件B，C，B,C切换显示，请问怎么切换时出发组件内部对应的动画，目前的组件是这样的a.vue
<B v-if="showB"/>
<C v-else/>直接改变showB就会导致组件B整个被销毁，来不及看到离场动画
组件有多个离场动画
回复
1个回答
test
2024-07-11
用<Transition>包裹就可以
//template
<Transition>
<B v-if="showB"/>
<C v-else/>
</Transition>//css
.v-enter-active,
.v-leave-active {
transition: opacity 0.5s ease;
}
.v-enter-from,
.v-leave-to {
opacity: 0;
}
如果你有多个动画，也可以用这个来做，可以参考Vue文档中的动画序列部分
可以通过mode="out-in"来控制两个组件的动画时机
回复
适合作为回答的
- 经过验证的有效解决办法
- 自己的经验指引，对解决问题有帮助
- 遵循 Markdown 语法排版，代码语义正确
不该作为回答的
- 询问内容细节或回复楼层
- 与题目无关的内容
- “赞”“顶”“同问”“看手册”“解决了没”等毫无意义的内容