//引入库

<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. js对象的key类型

    http://javascript.ruanyifeng.com/grammar/object.html#toc2 对象的所有键名都是字符串(ES6 又引入了 Symbol 值也可以作为键名),所以加 ...

  2. pycharm开发django项目 static报404解决方法

    settings文件中确保有以下配置 # Static files (CSS, JavaScript, Images)# https://docs.djangoproject.com/en/1.10/ ...

  3. Linux rcp命令详解

    Linux rcp命令 Linux rcp命令用于复制远程文件或目录. rcp指令用在远端复制文件或目录,如同时指定两个以上的文件或目录,且最后的目的地是一个已经存在的目录,则它会把前面指定的所有文件 ...

  4. 关于STM32 ADC自校准的个人理解

    前几天发过一篇帖子,叫:关于STM32 ADC自校准的个人理解文章大体说的是自校准前要先将ADON位置1,之后再校准. 本以为彻底的了解了自校准的过程,但是昨天晚上无意间看到了一个函数说明,不禁愁云又 ...

  5. 获取 TUniConnection.SpecificOptions默认值和下拉框列表值

    TUniConnection的SpecificOptions参数决定了数据库连接配置参数,但可惜的是,SpecificOptions设计器界面,Devart公司只能让它在设计期配置! Specific ...

  6. Windows Phone 常用资源

    统计分析: 1. 友盟 http://www.umeng.com SDK: http://www.nuget.org/packages/UmengAnalytics/ 集成文档: http://dev ...

  7. InfluxDB 常用命令

    查表: http://192.168.0.200:8086/query?q=select+*+from+telegraf..cpu http://192.168.0.200:8086/query?q= ...

  8. sqlserver 全局事务查询

    -- 此语句用于查看最老的活动事务.未完成的分布式事务或复制事务的信息. dbcc opentran -- 通过动态管理视图查看活动事务 select*from sys.dm_tran_active_ ...

  9. java取余%练习

    package ltb6w1; import java.io.*; public class TestMod { String st; int c; InputStreamReader is=new ...

  10. JavaScript中date日期的n种方法

    转自博客 https://blog.csdn.net/u013992330/article/details/54318737