本篇文章主要介绍了vue过渡和animate.css结合使用详解，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
今天学习了vue过渡和animate.css结合使用，所以，添加一点小笔记。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <script type="text/javascript" src="https://www.jb51.net/article/vue.js"></script> <link type="text/css" href="https://www.jb51.net/animate.css" > <style type="text/css"> p { width: 300px; height: 300px; background: red; margin: 10px auto; } </style> <script type="text/javascript"> window.onload = function(){ var app = new Vue({ el:'#box', data:{ show:false } }) } </script> </head> <body> <div> <!-- 控制数据的值切换显示隐藏 --> <button @click="show=!show">transition</button> <!-- <transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight"> <p v-show="show"></p> </transition> --> <!-- 第二种方法 --> <!-- <transition enter-active-class="animated zoomInLeft" leave-active-class="animated zoomOutRight"> <p v-show="show"></p> </transition> --> <!-- 多元素运动 --> <transition-group enter-active-class="zoomInLeft" leave-active-class="zoomOutRight"> <p v-show="show" :key="1"></p> <p v-show="show" :key="2"></p> </transition-group> </div> </body> </html>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章: