Vue 进入/离开动画

1、示例代码

（注：写到vue单文件中了）

<template><div><button v-on:click="show = !show">Toggle</button><transition name="fade"><p v-if="show">hello</p></transition></div> </template> <script>export default {data: function() {return {show: true}}} </script> <style>.fade-enter-active,.fade-leave-active {transition: opacity .5s}.fade-enter,.fade-leave-to {opacity: 0} </style>

2、说明

（1）需要transition 标签包裹。

（2）6个class状态

 

（3）效果：

 

总结

以上是生活随笔为你收集整理的Vue 进入/离开动画的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。