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 进入/离开动画的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。