vue过渡和animate.css结合使用详解
2017-06-14 15:43
1011 查看
今天学习了vue过渡和animate.css结合使用,所以,添加一点小笔记。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>动画</title> <script type="text/javascript" src="vue.js"></script> <link rel="stylesheet" type="text/css" href="animate.css" rel="external nofollow" > <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 id="box"> <!-- 控制数据的值切换显示隐藏 --> <button @click="show=!show">transition</button> <!-- <transition enter-active-class="zoomInLeft" leave-active-class="zoomOutRight"> <p v-show="show" class="animated"></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" class="animated" :key="1"></p> <p v-show="show" class="animated" :key="2"></p> </transition-group> </div> </body> </html>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章推荐
- vue过渡和animate.css结合使用
- vue和animate.css怎么结合使用
- 三六、vue中使用animate.css
- 详解vue2.0 transition 多个元素嵌套使用过渡
- vue 和animate.css 的动画使用
- vue2.0使用animate.css动画,transition&transition-group
- vue2.0 和 animate.css的结合使用
- vue 1.0 结合animate.css定义动画效果
- animate.css在vue项目中的使用教程
- vue 和animate.css动画使用
- vue之vue与animate.css动画结合
- Vue自定义动画和animate.css使用
- 详解在vue-cli中引用jQuery、bootstrap以及使用sass、less编写css
- 详解使用Vue.Js结合Jquery Ajax加载数据的两种方式
- 基于vue中css预加载使用sass的配置方式详解
- 在vue中使用animate.css
- iOS UIView animateWithDuration 使用详解
- UIView animateWithDuration 使用详解
- Xz压缩的技术结合tar的使用详解
- UIView animateWithDuration 使用详解