1、案例1
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>动画</title> <style> /* 进入动画生效时的样式，持续时间1秒 */ .myname-enter-active { animation: bounce-in 1s; } /* 离开动画生效时的样式，持续时间1秒，reverse表示定义的动画的逆向效果*/ .myname-leave-active { animation: bounce-in .5s reverse; } /* 动画效果 */ @keyframes bounce-in { /* 动画效果： 正向：时间的百分比,1秒为例,0秒时不显示,0.5秒时放大1.5倍,1秒时显示原大小 逆向：时间的百分比,1秒为例,0秒时显示原大小,0.5秒时放大1.5倍,1秒时消失 */ 0% { transform: scale(0); } 50% { transform: scale(1.5); } 100% { transform: scale(1); } } </style> </head> <body> <div id="app"> <button @click="showFlag = !showFlag">按钮</button><br> <!--对需要动画的元素用transition标签包裹，并给一个自定义的name属性--> <transition name="myname"> <p v-show="showFlag" style="display: inline-block;">我是动画</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>