1.0
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="../animate.css" rel="stylesheet"> <script type="text/javascript" src="../vue1026.js"></script> </head> <body> <div id="app"> <button @click="xsClick">请点击</button> <br> <div v-show="xs" transition="show" class="animated">这是一个美丽的清晨。</div> </div> </body> <script> new Vue({ el:'#app', data:{ xs:false, }, methods:{ xsClick:function () { this.xs=!this.xs; } }, transitions: { 'show': { enterClass: 'fadeInRight', leaveClass: 'fadeOutRight' } } }); </script> </html>
2.0
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <link href="../animate.css" rel="stylesheet" type="text/css"> </head> <style> .show{ transition:0.4s all ease; } </style> <body> <div id="app"> <button @click="xsClick">请点击</button> <transition enter-active-class="fadeInRight" leave-active-class="fadeOutRight"> <div v-show="xs" class="animated" class="show" >这是一个美丽的清晨。</div> </transition> </div> <script type="text/javascript" src="../vue221.js"></script> <!--<script src="../vue-resource.min.js"></script>--> <script> new Vue({ el:'#app', data:{ xs:true }, methods:{ xsClick:function () { this.xs=!this.xs } } }) </script> </body> </html>