1、案例1
<!DOCTYPE html> <html> <head> <!-- 过渡效果: myname-enter:进入过渡的开始状态 myname-enter-active:进入过渡生效时的状态 myname-enter-to:进入过渡的结束状态 myname-leave:离开过渡的开始状态 myname-leave-active:离开过渡生效时的状态 myname-leave-to:离开过渡结束时的状态 --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>过渡</title> <style> /* 进入过渡生效时和离开过渡生效时的样式 */ .myname-enter-active, .myname-leave-active { transition: opacity 2s; } /* 进入过渡的开始状态和离开过渡的结束状态的样式 */ .myname-enter, .myname-leave-to { opacity: 0; } </style> </head> <body> <div id="app"> <button @click="showFlag = !showFlag">按钮</button> <!--对需要过渡的元素用transition标签包裹，并给一个自定义的name属性--> <transition name="myname"> <p v-show="showFlag">我是过渡</p> </transition> </div> <script src="../js/vue.js" type="text/javascript"></script> <script> const vm = new Vue({ el: "#app", data: { showFlag: true }, methods: { } }); </script> </body> </html>
2、案例2
<!DOCTYPE html> <html> <head> <!-- 过渡效果: myname-enter:进入过渡的开始状态 myname-enter-active:进入过渡生效时的状态 myname-enter-to:进入过渡的结束状态 myname-leave:离开过渡的开始状态 myname-leave-active:离开过渡生效时的状态 myname-leave-to:离开过渡结束时的状态 --> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>过渡</title> <style> /* 进入过渡生效时和离开过渡生效时的样式 */ .myname-enter-active { transition: opacity 5s; } .myname-leave-active { transition: opacity 1s; } /* 进入过渡的开始状态和离开过渡的结束状态的样式 */ .myname-enter, .myname-leave-to { opacity: 0; transform: translateX(100px); } </style> </head> <body> <div id="app"> <button @click="showFlag = !showFlag">按钮</button> <!--对需要过渡的元素用transition标签包裹，并给一个自定义的name属性--> <transition name="myname"> <p v-show="showFlag">我是过渡</p> </transition> </div> <script src="../js/vue.js" type="text/javascript"></script> <script> const vm = new Vue({ el: "#app", data: { showFlag: true }, methods: { } }); </script> </body> </html>