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 相关文章推荐
你必须知道的Javascript知识点之&quot;字面量和对应类型&quot;说明介绍
Apr 23 Javascript
AngularJS入门教程之XHR和依赖注入详解
Aug 18 Javascript
Node.js成为Web应用开发最佳选择的原因
Feb 05 Javascript
Angular 4.x+Ionic3踩坑之Ionic3.x pop反向传值详解
Mar 13 Javascript
jQuery实现鼠标点击处心形漂浮的炫酷效果示例
Apr 12 jQuery
关于HTML5的data-*自定义属性的总结
May 05 Javascript
Node.js Buffer用法解读
May 18 Javascript
解决vuecli3.0热更新失效的问题
Sep 19 Javascript
浅谈Vue数据响应
Nov 05 Javascript
JavaScript实现数字前补“0”的五种方法示例
Jan 03 Javascript
微信小程序使用map组件实现路线规划功能示例
Jan 22 Javascript
基于node.js实现爬虫的讲解
Feb 18 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
php4的彩蛋
2006/10/09 PHP
PHP错误和异常处理功能模块示例
2016/11/12 PHP
thinkphp5.1 文件引入路径问题及注意事项
2018/06/13 PHP
PHP通过调用新浪API生成t.cn格式短网址链接的方法详解
2019/02/20 PHP
PHP连接MySQL数据库的三种方式实例分析【mysql、mysqli、pdo】
2019/11/04 PHP
JS高级调试技巧:捕获和分析 JavaScript Error详解
2014/03/16 Javascript
点击表单提交时出现jQuery没有权限的解决方法
2014/07/23 Javascript
js基于setTimeout与setInterval实现多线程
2016/06/17 Javascript
AngularJs验证重复密码的方法(两种)
2016/11/25 Javascript
JavaScript获取键盘按键的键码(参照表)
2017/01/10 Javascript
js Element Traversal规范中的元素遍历方法
2018/04/19 Javascript
详解Vue-cli3 项目在安卓低版本系统和IE上白屏问题解决
2019/04/14 Javascript
Vue实现导航栏点击当前标签变色功能
2020/08/19 Javascript
浅析Angular 实现一个repeat指令的方法
2019/07/21 Javascript
在vue项目中引用Antv G2,以饼图为例讲解
2020/10/28 Javascript
vant-ui组件调用Dialog弹窗异步关闭操作
2020/11/04 Javascript
jQuery实现简单弹幕制作
2020/12/10 jQuery
python中单例常用的几种实现方法总结
2018/10/13 Python
Python中的集合介绍
2019/01/28 Python
Python socket实现多对多全双工通信的方法
2019/02/13 Python
pandas apply多线程实现代码
2020/08/17 Python
捷克家居装饰及图书音像购物网站:Velký košík
2018/04/16 全球购物
奥地利体育网上商店:Gigasport
2019/10/09 全球购物
西班牙购买隐形眼镜、眼镜和太阳镜网站:Lentiamo.es
2020/06/11 全球购物
网络安全方面的面试题
2015/11/04 面试题
个人求职简历的自我评价
2013/10/19 职场文书
大学四年的个人自我评价
2014/01/14 职场文书
餐厅考勤管理制度
2014/01/28 职场文书
财经学院自荐信范文
2014/02/02 职场文书
房地产资料员岗位职责
2014/07/02 职场文书
2015年普法依法治理工作总结
2015/05/26 职场文书
正规借条模板
2015/05/26 职场文书
孕妇病假条怎么写
2015/08/17 职场文书
使用nginx动态转换图片大小生成缩略图
2021/03/31 Servers
Java实现多线程聊天室
2021/06/26 Java/Android
宝塔更新Python及Flask项目的部署
2022/04/11 Python