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 相关文章推荐
Ext修改GridPanel数据和字体颜色、css属性等
Jun 13 Javascript
JavaScript中的Math.E属性使用详解
Jun 12 Javascript
js点击列表文字对应该行显示背景颜色的实现代码
Aug 05 Javascript
Bootstrap每天必学之标签与徽章
Nov 27 Javascript
微信小程序开发探究
Dec 27 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
bootstrap+jquery项目引入文件报错的解决方法
Jan 22 jQuery
微信小程序实现即时通信聊天功能的实例代码
Aug 17 Javascript
如何在 JavaScript 中更好地利用数组
Sep 27 Javascript
Vue开发之watch监听数组、对象、变量操作分析
Apr 25 Javascript
Vue动态修改网页标题的方法及遇到问题
Jun 09 Javascript
webgl实现物体描边效果的方法介绍
Nov 27 Javascript
实例分析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
写一个用户在线显示的程序
2006/10/09 PHP
ThinkPHP调用common/common.php函数提示错误function undefined的解决方法
2014/08/25 PHP
php正则表达式验证(邮件地址、Url地址、电话号码、邮政编码)
2016/03/14 PHP
ThinkPHP3.1.x修改成功与失败跳转页面的方法
2017/09/29 PHP
关于 byval 与 byref 的区别分析总结
2007/10/08 Javascript
一个挺有意思的Javascript小问题说明
2011/09/26 Javascript
查看源码的工具 学习jQuery源码不错的工具
2011/12/26 Javascript
jQuery操作Select选择的Text和Value(获取/设置/添加/删除)
2013/03/06 Javascript
图标线性回归斜着移动到指定的位置
2013/08/16 Javascript
javascript时间排序算法实现活动秒杀倒计时效果
2021/01/28 Javascript
基于JavaScript实现拖动滑块效果
2017/02/16 Javascript
vue实现百度搜索下拉提示功能实例
2017/06/14 Javascript
Node.JS更改Windows注册表Regedit的方法小结
2017/08/18 Javascript
ubuntu编译nodejs所需的软件并安装
2017/09/12 NodeJs
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
2017/10/16 Javascript
在vue2.0中引用element-ui组件库的方法
2018/06/21 Javascript
通过函数作用域和块级作用域看javascript的作用域链
2018/08/05 Javascript
Vue 用Vant实现时间选择器的示例代码
2019/10/25 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
深入浅析vue全局环境变量和模式
2020/04/28 Javascript
vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作
2020/11/16 Javascript
tensorflow创建变量以及根据名称查找变量
2018/03/10 Python
python 对key为时间的dict排序方法
2018/10/17 Python
解决python中画图时x,y轴名称出现中文乱码的问题
2019/01/29 Python
Python生成rsa密钥对操作示例
2019/04/26 Python
python shapely.geometry.polygon任意两个四边形的IOU计算实例
2020/04/12 Python
在ipython notebook中使用argparse方式
2020/04/20 Python
Stefania Mode英国:奢华设计师和时尚服装
2017/10/23 全球购物
英国和爱尔兰的自炊式豪华度假小屋:Rural Retreats
2018/06/08 全球购物
新闻记者实习自我鉴定
2013/09/19 职场文书
高级工程师岗位职责
2013/12/15 职场文书
最新个人职业生涯规划书
2014/01/22 职场文书
公司合并协议书范本
2014/09/30 职场文书
小学教研工作总结2015
2015/05/13 职场文书
金榜题名主持词
2015/07/02 职场文书
农村房屋租赁合同(范本)
2019/07/23 职场文书