//引入库

<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. idea的svn安装

    https://blog.csdn.net/qq_27093465/article/details/74898489

  2. pycharm Process finished with exit code (0xC0000005)

    pycharm  Process finished with exit code  (0xC0000005)解决办法 上次报过这个错误,是在安装浏览器时发现的,报过同样的错误.按当时的方法,以为切地解 ...

  3. git push文件到远程github或者gitlab

    Git global setup git config --global user.name "luozeng" git config --global user.email &q ...

  4. 解决Ecipse和搜狗输入法快捷键冲突问题

    非常简单,关闭掉搜狗输入的所有快捷键!

  5. Typescript学习总结之泛型

    泛型: 参数化的类型,一般用来限制结合的内容 class Student { constructor(public name: string) { } say() { console.log(this ...

  6. 中文自然语言处理工具HanLP源码包的下载使用记录

    中文自然语言处理工具HanLP源码包的下载使用记录 这篇文章主要分享的是hanlp自然语言处理源码的下载,数据集的下载,以及将让源代码中的demo能够跑通.Hanlp安装包的下载以及安装其实之前就已经 ...

  7. 自然语言处理工具HanLP被收录中国大数据产业发展的创新技术新书《数据之翼》

    在12月20日由中国电子信息产业发展研究院主办的2018中国软件大会上,大快搜索获评“2018中国大数据基础软件领域领军企业”,并成功入选中国数字化转型TOP100服务商. 图:大快搜索获评“2018 ...

  8. 在Linux下安装JDK图文解析

    参考自http://weixiaolu.iteye.com/blog/1401786 JDK官网下载:http://blog.csdn.net/chongxin1/article/details/70 ...

  9. PICT测试工具的安装及使用

    PICT工具就是在微软公司出品一款成对组合的命令行生成工具,现在已经对外提供,可以在互联网上下载到 .PICT 可以有效地按照两两测试的原理,进行测试用例设计.在使用PICT时,需要输入与测试用例相关 ...

  10. 关于IP核中中断信号的使用---以zynq系统为例

    关于IP核中中断信号的使用---以zynq系统为例 1.使能设备的中断输出信号 2.使能处理器的中断接收信号 3.连接IP核到处理器之间的中断 此处只是硬件的搭建,软件系统的编写需要进一步研究. 搭建 ...