<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <style> .show{ transition:all 0.4s ease; } </style> <body> <link rel="stylesheet" href="animate.min.css"> <script src="vue2.513.js"></script> <div id="app"> <button @click="toggle">显示和隐藏</button><br> <transition enter-active-class="fadeInRight" leave-active-class="fadeOutRight"> <div v-show="isshow" class="animated" class="show">helllo vuejs</div> </transition> </div> <script> new Vue({ el:'#app', data:{ isshow:false }, methods:{ toggle:function(){ this.isshow=!this.isshow; } } }); </script> </body> </html>
vue2.0实现调用anmate动画库实现动态效果
最新推荐文章于 2024-06-06 16:40:41 发布