//引入库
<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. windows可以使用curl啦(以及其他的Linux下面的指令)!

    windows可以使用cUrl了!同期放出了tar指令,去年下半年才放出来的. 介绍文章 https://blogs.technet.microsoft.com/virtualization/2017 ...

  2. SQL Server 2005无法远程连接的解决方法 (转帖)

    方法如下:  一.为 SQL Server 2005 启用远程连接1. 单击"开始",依次选择"程序"."Microsoft SQL Server 2 ...

  3. Excel文件转为其他格式文件

    引用:Spire.XLS 是一个 Excel 文件的读写库,无需安装office,使用起来也挺方便的.Spire还有一些其他的库(Spire.Doc,Spire.Pdf……) 说明:Spire.XLS ...

  4. sort a given string

    my solution: function order(words){ var splitToArr = words.split(' '), len = splitToArr.length, newA ...

  5. .net core 连接sql server 时提示Connection Timeout Expired

    .net core开发环境是ubuntu LINUX, 在ubuntu 上 telnet 数据库IP 端口是通的. SQL SERVER 是2008 ,未打SP补丁. 打完 SQL SERVER  2 ...

  6. workerman vmstat服务器状态监控服务

    转载出自 :http://www.workerman.net/workerman-vmstat workerman vmstat服务器状态监控服务 vmstat 命令可以展现服务器的CPU使用率,内存 ...

  7. Java第06次实验提纲(集合)

    PTA与参考资料 重要参考-集合简述 题集:jmu-Java-06-集合 集合实验文件 第1次实验 1.1 ArrayListIntegerStack(课堂演示) 可演示:jdk中的javadoc文档 ...

  8. 用winrar和ftp命令实现自动备份文件并自动上传到指定的ftp服务器

    这篇文章主要介绍了用winrar和ftp命令实现自动备份文件并自动上传到指定的ftp服务器的方法,需要的朋友可以参考下. http://www.jb51.net/article/50359.htm 1 ...

  9. hadoop fs、hadoop dfs与hdfs dfs的区别

    不多说,直接上干货! hadoop fs:    使用面最广,可以操作任何文件系统. hadoop dfs与hdfs dfs :   只能操作HDFS文件系统相关(包括与Local FS间的操作),前 ...

  10. python selenium 模拟登陆百度账号

    代码: from selenium import webdriver url = 'https://passport.baidu.com/v2/?login' username = 'your_use ...