<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>Examples</title> <meta name="description" content=""> <meta name="keywords" content=""> <link href="" rel="stylesheet"> <style> /* 进场动画 */ .kerwin-enter-active { animation: aaa 1.5s; } /* 出场动画 */ .kerwin-leave-active { animation: aaa 1.5s reverse; } @keyframes aaa { 0% { opacity: 0; transform: translateX(100px); } 100% { opacity: 1; transform: translateX(0px); } } </style> <!-- <link rel="stylesheet" href="lib/animate.css"> --> <script type="text/javascript" src="lib/vue.js"></script> </head> <body> <div id="box"> <button @click="isShow= !isShow">change</button> <transition enter-active-class="kerwin-enter-active" leave-active-class="kerwin-leave-active"> <div v-show="isShow">1111111111111111</div> </transition> <transition name="kerwin"> <div v-if="isShow"> <div >222222222222222222</div> <div >333333333333333</div> <div >44444444444444444</div> <div>55555555555555555</div> </div> </transition> </div> <script> new Vue({ el:"#box", data:{ isShow:false } }) </script> </body> </html>
浙公网安备 33010602011771号