//引入库

<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. react 子组件访问父组件的方法

    回调函数(推荐) 地址:https://ourcodeworld.com/articles/read/409/how-to-update-parent-state-from-child-compone ...

  2. ubuntu防火墙ufw使用教程

    查看ubuntu版本cat /etc/issue或者lsb_release -a 防火墙 由于Linux原始的防火墙工具iptables过于繁琐,所以ubuntu默认提供了一个基于iptable之上的 ...

  3. 同步中的四种锁synchronized、ReentrantLock、ReentrantReadWriteLock、StampedLock

    为了更好的支持并发程序,JDK内部提供了多种锁.本文总结4种锁. 1.synchronized同步锁 使用: synchronized本质上就2种锁: 1.锁同步代码块 2.锁方法 可用object. ...

  4. 修改 spawn node.exe" ENOENT at notFoundError问题

    Ionic server启动后,出现spawn node.exe" ENOENT at notFoundError ...\node_modules\cross-spawn\lib\enoe ...

  5. spark-streaming-kafka-0-8 和 0-10的使用区别

    一.spark-streaming-kafka-0-8_2.11-2.0.2.jar 1.pom.xml <!-- https://mvnrepository.com/artifact/org. ...

  6. Linux下批处理文件编写

    linux下的批处理文件,基本就是shell脚本文件. 一.最简单的脚本书写方法为: 1.新建一个文件,名字为test(自己定义的名字) touch test.sh 2.在里面编写脚本 程序必须以下面 ...

  7. 【java】break,continue和return区别

    break:适用于switch和loop continue:只适用于loop 两者都可以通过给循环加标签来控制跳出,如下例所示 class BreakDemo { public static void ...

  8. ubuntu 16.04 安装VS CODE时 此软件来自第三方且可能包含非自由组件

    先安装gdebi: sudo apt-get install gdebi 然后执行: sudo apt install ./vscode.deb

  9. IIS7 UNC File caching issue

    You have to either choose dir-monitoring and file-change-notification with its drawback of using SMB ...

  10. STL基础--流

    流 介绍 // cout: 全局ostream对象,(typedef basic_ostream<char> ostream) // <<: ostream& ostr ...