1 <!DOCTYPE html> 2 <html lang="en" xmlns:v-on="http://www.w3.org/1999/xhtml" xmlns:v-bind="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> 7 <style> 8 /* 可以设置不同的进入和离开动画 *//* 设置持续时间和动画函数 */ 9 .fade-enter-active,.fade-leave-active{transition: opacity 2s} 10 .fade-enter,.fade-leave-to{opacity: 0} 11 /* Vue在元素显示与隐藏的过渡中，提供了 6 个 class 来切换： 12 进入过程： 13 1、v-enter：定义进入过渡的开始状态 14 2、v-enter-active：定义进入过渡生效时的状态 15 3、v-enter-to: 2.1.8版及以上 定义进入过渡的结束状态 16 离开过程： 17 4、v-leave: 定义离开过渡的开始状态 18 5、v-leave-active：定义离开过渡生效时的状态 19 6、v-leave-to: 2.1.8版及以上 定义离开过渡的结束状态 20 */ 21 22 .slide-fade-enter-active{transition: all .3s ease;} 23 .slide-fade-leave-active{transition: all .8s cubic-bezier(1.0,0.5,0.8,1.0);} 24 .slide-fade-enter,.slide-fade-leave-to{transform: translateX(10px); opacity: 0;} 25 26 .bounce-enter-active{animation: bounce-in .5s} 27 .bounce-leave-active{animation: bounce-in .5s reverse;} 28 @keyframes bounce-in { 29 0%{transform: scale(0);} 30 50%{transform: scale(1.5);} 31 100%{transform: scale(1);} 32 } 33 </style> 34 </head> 35 <body> 36 <div id="databinding"> 37 <button v-on:click = "show = !show">点我</button> 38 <transition name="fade"> 39 <p v-show="show" v-bind:style="styleobj">动画实例</p> 40 </transition> 41 </div> 42 43 <script> 44 var vm = new Vue({ 45 el:‘#databinding‘, 46 data:{ 47 show:true, 48 styleobj:{ 49 fontSize:‘30px‘, 50 color:‘red‘, 51 }, 52 }, 53 methods:{}, 54 }); 55 </script> 56 57 <div id="databinding1"> 58 <button v-on:click="show=!show">点我CSS过渡</button> 59 <transition name="slide-fade"> 60 <p v-if="show">这是一个CSS过渡的测试</p> 61 </transition> 62 </div> 63 <script> 64 new Vue({ 65 el:‘#databinding1‘, 66 data: {show: true}, 67 }); 68 </script> 69 70 <div id="databinding2"> 71 <button v-on:click="show=!show">点我CSS动画</button> 72 <transition name="bounce"> 73 <p v-if="show">这是一个CSS动画测试</p> 74 </transition> 75 </div> 76 <script> 77 new Vue({ 78 el:‘#databinding2‘, 79 data: {show: true}, 80 }); 81 </script> 82 83 </body> 84 </html>
原文：https://www.cnblogs.com/chunfang/p/13503356.html