//引入库

<link rel="stylesheet" type="text/css" href="animate.css">

（https://daneden.github.io/animate.css/）

//用法

//enter-active-class="animated   动画类名"     leave-active-class="animated    动画类名"   :duration 定义动画进入时长和离开时长
<transition name="fade" :duration="{enter:5000,leave:5000}"  enter-active-class="animated jello"  leave-active-class="animated shake"> <div v-if="show">hello</div> </transition>

　　同时有动画和过渡效果

在<transition></transition>里面加入自定义属性  appear(自定义)   appear-active-class="animated shake"

这样就可以实现第一次加载也有动画的效果

vue使用animate.css库的更多相关文章

  1. vue 使用Animate.css库

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  2. vue 结合 animate.css

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

  3. vue使用animate.css类库实现动画

    首先安装animate.css类库 cnpm install animate.css –save 然后在vue的script文件中引用 import $ from '../assets/js/jque ...

  4. vue与animate.css的结合使用

    在vue项目中,由于页面需要动画效果,使用动画其实有多种方式,可以使用vue中的过渡transition,可以使用animate动画与transition配合使用,也可以单独使用animate动画库. ...

  5. 在vue.js 中使用animate.css库

    main.js文件引入后,在vue文件里直接添加class   animated bounceInUp

  6. vue中使用animate.css

    一:使用animate.css的使用 1.安装npm install animate.css --save 2.在main.js中引入import animate from 'animate.css' ...

  7. 全面解析vue-cli生成的项目中使用其他库（js库、css库）

    前言:最近有小伙伴问我,是不是用vue脚手架生成的项目就不能jquery了呢?显然,答案是否定的,必须能用.但是个人建议最好不要用了,用人家vue提供的不好嘛. 一.用vue-cli生成项目 1. v ...

  8. vue2借助animate.css实现路由动画效果

    第一步: npm install animate.css --save 第二步:打开main.js import animate from 'animate.css' Vue.use(animate) ...

  9. python 全栈开发，Day58(bootstrap组件,bootstrap JavaScript 插件,后台模板,图表插件,jQuery插件库,Animate.css,swiper,运行vue项目)

    一.bootstrap组件 无数可复用的组件,包括字体图标.下拉菜单.导航.警告框.弹出框等更多功能. 组件和插件的区别? 插件:一个功能,比如js文件 组件:html css js 组件包含插件 面 ...

随机推荐

  1. 开源Astro（SparkSQL On HBase）

    华为2015年7月20日在O'Reilly Open Source Convention (OSCON) 上宣布Spark SQL on HBase package正式开源.Spark SQL on ...

  2. WebApi安全性 使用TOKEN+签名验证 (秘钥是GUID的,私有的，不是雙方的，并不在网络连接上传输)

    转http://www.cnblogs.com/MR-YY/archive/2016/10/18/5972380.html WebApi安全性 使用TOKEN+签名验证   首先问大家一个问题,你在写 ...

  3. mac打开文件提示文件已经坏了的修改

    10.12下面,mac做了安全的限制,不能打开任意的文件,需要解除限制 sudo spctl --master-disable

  4. mongoDB oplog的说明及应用

    mongoDB oplog 说明 ts:8字节的时间戳,由4字节unix timestamp + 4字节自增计数表示.这个值很重要,在选举(如master宕机时)新primary时,会选择ts最大的那 ...

  5. 【Git】Git使用--常用命令

    查看所有分支 git branch -a 查看本地分支 git branch 切换分支 git checkout test demo git checkout release_1.3.1 (切换到re ...

  6. python之全局安装包管理工具pip

    1.curl 'https://bootstrap.pypa.io/get-pip.py' > get-pip.py 2.sudo python get-pip.py 3.sudo easy_i ...

  7. js面向对象1

    1.在空白的Object上加属性和方法: <script type="text/javascript"> function createPerson(name, qq) ...

  8. 显示定位方法，提取中间text 封装成函数的方法

    tager='工作台' element=WebDriverWait(self.dr,15,0.1).until( eval("lambda x: x."+'find_element ...

  9. visual studio中新建和使用dll

    本文的目的是 创建一个最小化的dll并使用它 环境:win7 + vs2012 一个VS的解决方案(sln)下面可以有多个项目(project),所以这里新建一个解决方案,然后下面创建两个项目. 新建 ...

  10. 开启BBR加速

    在linux里用 wget --no-check-certificate https://github.com/teddysun/across/raw/master/bbr.sh chmod +x b ...