vue2.0 和 animate.css的结合使用


Posted in Javascript onDecember 12, 2017

 这里说的是vue2.0和animate.css的结合使用。其实用过就知道用法是比较简单的。但是就是刚开始使用的时候,难免有的会遇到各种问题。简单的说说我所用过并且遇过的坑。

    首先是transition组件,在2.0中由transition属性变成了一个独立的组件。

   用法:

   1、

     要用animate.css,那么首先需要做的就是导入它。局部的导入的话,就在当前的.vue文件中的style标签中导入:@import "animate.css";   注意,导入css文件的时候。在末尾应该是要加上分号的。如果不加的话,会影响后面写的局部样式

 2、

  开始使用animate.css

vue2.0 和 animate.css的结合使用

上述是一个完整的结构。其中重要的几个点用箭头表示出来。首先在transition组件内部,需要定义两个基本的class类,表示过渡进来和过渡出去的时候所要配合使用的animate.css的类值。zoomInLeft/zoomOutRight是其中的一对儿。具体的其他效果可以查看animate.css的官网。其次在transition组件内部的话,需要过渡的子元素需要加上animated类。最后可能也是比较容易忽略的点(至少我就是)。这个v-show,看似好像是多余的,但是不加上的话,对于过渡效果是没有用的。因为过渡 是从一个无到有或者有到无的一个效果。最开始进来的时候如果元素本身就是show的,那么过渡就失效了。所以在元素上面需要加上这个v-show属性。在过渡效果进来的时候,v-show设置为true,相反为false。

还有一点是在上述代码中没有展现出来的,如果有多个子元素都要实现过渡,可以加上<transition-group></transition-group>进行包裹。

PS:下面看一段实例代码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>

总结

以上所述是小编给大家介绍的vue2.0 和 animate.css的结合使用,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
js 设置缓存及获取设置的缓存
May 08 Javascript
解释&amp;&amp;和||在javascript中的另类用法
Jul 28 Javascript
扒一扒JavaScript 预解释
Jan 28 Javascript
js数组去重的5种算法实现
Nov 04 Javascript
jQuery 的 ready()的纯js替代方法
Nov 20 Javascript
JS实现点击表头表格自动排序(含数字、字符串、日期)
Jan 22 Javascript
基于Bootstrap表单验证功能
Nov 17 Javascript
Node.js进阶之核心模块https入门
May 23 Javascript
jQuery实现获取动态添加的标签对象示例
Jun 28 jQuery
vue中选项卡点击切换且能滑动切换功能的实现代码
Nov 25 Javascript
Vuex mutitons和actions初使用详解
Mar 04 Javascript
Vue项目中使用jquery的简单方法
May 16 jQuery
实例分析JS与Node.js中的事件循环
Dec 12 #Javascript
Vue2.0学习之详解Vue 组件及父子组件通信
Dec 12 #Javascript
JS中精巧的自动柯里化实现方法
Dec 12 #Javascript
Vue2.0 slot分发内容与props验证的方法
Dec 12 #Javascript
分析JS中this引发的bug
Dec 12 #Javascript
微信小程序使用progress组件实现显示进度功能【附源码下载】
Dec 12 #Javascript
基于input动态模糊查询的实现方法
Dec 12 #Javascript
You might like
用IE远程创建Mysql数据库的简易程序
2006/10/09 PHP
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
php显示时间常用方法小结
2015/06/05 PHP
Laravel 已登陆用户再次查看登陆页面的自动跳转设置方法
2019/09/30 PHP
PHP命名空间(namespace)原理与用法详解
2019/12/11 PHP
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
2007/01/16 Javascript
js字符串截取函数substr substring slice使用对比
2013/11/27 Javascript
JavaScript Math.ceil 方法(对数值向上取整)
2015/01/09 Javascript
JavaScript中的Math.SQRT1_2属性使用简介
2015/06/14 Javascript
JavaScript中数组去除重复的三种方法
2016/04/22 Javascript
JSON 对象未定义错误的解决方法
2016/09/29 Javascript
jQuery焦点图轮播效果实现方法
2016/12/19 Javascript
JS实现页面中所有img对象添加onclick事件及新窗口查看图片的方法
2016/12/27 Javascript
yii form 表单提交之前JS在提交按钮的验证方法
2017/03/15 Javascript
微信小程序 动画的简单实例
2017/10/12 Javascript
微信小程序数据存储与取值详解
2018/01/30 Javascript
vue系列之requireJs中引入vue-router的方法
2018/07/18 Javascript
JavaScript使用享元模式实现文件上传优化操作示例
2018/08/07 Javascript
layer弹出的iframe层在执行完毕后关闭当前弹出层的方法
2018/08/17 Javascript
JavaScript数据结构之栈实例用法
2019/01/18 Javascript
[02:51]2014DOTA2国际邀请赛 IG战队官方纪录片
2014/07/21 DOTA
[01:10:58]Spirit vs NB Supermajor小组赛 A组败者组决赛 BO3 第二场 6.2
2018/06/03 DOTA
Python  __getattr__与__setattr__使用方法
2008/09/06 Python
python实现的DES加密算法和3DES加密算法实例
2015/06/03 Python
Python处理JSON数据并生成条形图
2016/08/05 Python
浅谈python中的占位符
2017/11/09 Python
AI人工智能 Python实现人机对话
2017/11/13 Python
数据清洗--DataFrame中的空值处理方法
2018/07/03 Python
Python实现的微信支付方式总结【三种方式】
2019/04/13 Python
windows 10 设定计划任务自动执行 python 脚本的方法
2019/09/11 Python
如何写出高性能的JSP和Servlet
2013/01/22 面试题
网络编程中设计并发服务器,使用多进程与多线程,请问有什么区别?
2016/03/27 面试题
捐款倡议书格式范文
2014/05/14 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
四川省传达学习贯彻党的群众路线教育实践活动总结大会精神新闻稿
2014/10/26 职场文书
2014年乡镇妇联工作总结
2014/12/02 职场文书