<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>css动画原理</title> <script src="../js/vue.js"></script> <!--官网：https://cn.vuejs.org/v2/guide/transitions.html#CSS-%E5%8A%A8%E7%94%BB--> <style> .fade-enter, /*进入过渡的开始状态*/ .fade-leave-to{ /*离开过渡的结束状态*/ opacity: 0; } .fade-enter-active, /*进入过渡生效时的状态*/ .fade-leave-active{ /*离开过渡生效时的状态*/ transition: opacity .5s; } .slide-fade-enter-active{ /* 设置持续时间和动画函数 */ transition: all .3s ease; } .slide-fade-leave-active{ transition: all .8s cubic-bezier(1.0,0.5,0.8,1.0); } .slide-fade-enter,.slide-fade-leave-to{ transform: translateX(10px); opacity: 0; } </style> </head> <body> <div id="app"> <button @click="btnClick">change</button> <transition name="fade"> <div v-if="show">hello</div> </transition> <hr> <transition name="slide-fade"> <div v-if="show">hello</div> </transition> </div> <script> vm = new Vue({ el: '#app', data: { show:true }, methods:{ btnClick:function () { this.show = !this.show } } }) </script> </body> </html>
Vue的css动画原理
猜你喜欢
转载自www.cnblogs.com/fly-book/p/12017289.html
今日推荐
周排行