vue过渡和animate.css结合使用详解


Posted in Javascript onJune 14, 2017

今天学习了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js 小贴士一星期合集
Apr 07 Javascript
使用js如何实现全选与全不选
Dec 30 Javascript
jQuery左侧大图右侧小图焦点图幻灯切换代码分享
Aug 19 Javascript
Node.js如何自动审核团队的代码
Jul 20 Javascript
angular基于路由控制ui-router实现系统权限控制
Sep 27 Javascript
Vue.JS入门教程之事件监听
Dec 01 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
AngularJS实现tab选项卡的方法详解
Jul 05 Javascript
浅谈vue项目4rs vue-router上线后history模式遇到的坑
Sep 27 Javascript
ES6中Symbol、Set和Map用法详解
Aug 20 Javascript
构建大型 Vue.js 项目的10条建议(小结)
Nov 14 Javascript
ExtJs的Ext.Ajax.request实现waitMsg等待提示效果
Jun 14 #Javascript
详解Vue.use自定义自己的全局组件
Jun 14 #Javascript
详解vue-router2.0动态路由获取参数
Jun 14 #Javascript
微信小程序动态添加分享数据
Jun 14 #Javascript
vue实现百度搜索下拉提示功能实例
Jun 14 #Javascript
JS查找数组中重复元素的方法详解
Jun 14 #Javascript
JS设置手机验证码60s等待实现代码
Jun 14 #Javascript
You might like
PHP反转字符串函数strrev()函数的用法
2012/02/04 PHP
在windows服务器开启php的gd库phpinfo中未发现
2013/01/13 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
PHP is_subclass_of函数的一个BUG和解决方法
2014/06/01 PHP
PHP使用pear实现mail发送功能 windows环境下配置pear
2016/04/15 PHP
详谈PHP中public,private,protected,abstract等关键字的用法
2017/12/31 PHP
基于ThinkPHP5框架使用QueryList爬取并存入mysql数据库操作示例
2019/05/25 PHP
javascript进行数组追加方法小结
2014/06/16 Javascript
JavaScript解析json格式数据简单示例
2014/12/09 Javascript
Windows系统中安装nodejs图文教程
2015/02/28 NodeJs
jQuery滚动条插件nanoscroller使用指南
2015/04/21 Javascript
js限制input标签中只能输入中文
2015/06/26 Javascript
微信JSSDK上传图片
2015/08/23 Javascript
jquery实现横向图片轮播特效代码分享
2015/11/19 Javascript
JS使用正则实现去掉字符串左右空格的方法
2016/12/27 Javascript
ajax与jsonp的区别及用法
2018/10/16 Javascript
vue计算属性get和set用法示例
2019/02/08 Javascript
微信小程序实现消息框弹出动画
2020/04/18 Javascript
Vue事件修饰符native、self示例详解
2019/07/09 Javascript
防止Layui form表单重复提交的实现方法
2019/09/10 Javascript
[16:27]DOTA2 HEROS教学视频教你分分钟做大人-艾欧
2014/06/11 DOTA
[58:32]EG vs Liquid 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
[49:29]LGD vs Winstrike 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
Python实现简单字典树的方法
2016/04/29 Python
浅析Python中的for 循环
2016/06/09 Python
Python multiprocess pool模块报错pickling error问题解决方法分析
2019/03/20 Python
PyQt5组件读取参数的实例
2019/06/25 Python
CSS3+Sprite实现僵尸行走动画特效源码
2016/01/27 HTML / CSS
AmazeUI图片轮播效果的示例代码
2020/08/20 HTML / CSS
serialVersionUID具有什么样的特征
2014/02/20 面试题
机电一体化大学生求职信
2013/11/08 职场文书
职称评定自我鉴定
2014/03/18 职场文书
个人安全生产责任书
2014/07/28 职场文书
争先创优个人总结
2015/03/04 职场文书
党风廉政建设个人总结
2015/03/06 职场文书
Windows下使用Nginx+Tomcat做负载均衡的完整步骤
2021/03/31 Servers