//引入库

<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. taro 消息机制

    Taro 提供了 Taro.Events 来实现消息机制,使用时需要实例化它 同时 Taro 还提供了一个全局消息中心 Taro.eventCenter 以供使用,它是 Taro.Events 的实例 ...

  2. tcpdump过滤某个端口

    一般我们使用Tcpdump时都是使用: Java代码   tcpdump -i ethx      www.2cto.com   下面这条命令就是查看80端口的访问量,进行排序,取前20位    Ja ...

  3. golang gorilla websocket例子

    WebSocket协议是基于TCP的一种新的网络协议.它实现了浏览器与服务器全双工(full-duplex)通信--允许服务器主动发送信息给客户端. WebSocket通信协议于2011年被IETF定 ...

  4. 胖子哥的大数据之路（7）- 传统企业切入核心or外围

    一.引言 昨天和一个做互联网大数据(零售行业)的朋友交流,关于大数据传统企业实施的切入点产生了争执,主要围绕两个问题进行了深入的探讨: 问题1:对于一个传统企业而言什么是核心业务,什么是外围业务? 问 ...

  5. LeetCode——14. Longest Common Prefix

    一.题目链接:https://leetcode.com/problems/longest-common-prefix/ 二.题目大意: 给定若干个字符串,找出它们的最长公共子串. 三.题解: 这道题目 ...

  6. STL基础--基本介绍

    为什么要使用C++标准库 /* * 为什么使用C++标准库: * 1. 代码重用,不用重新造轮子 * 2. 效率(快速,且使用更少的资源). 现代C++编译器经常对C++标准库的代码有优化 * 3. ...

  7. SVM清晰讲解——线性可分问题

    转载作者:liangdas 引言: 1995年Cortes和Vapnik于首先提出了支持向量机(Support Vector Machine),由于其能够适应小样本的分类,分类速度快等特点,性能不差于 ...

  8. 写在vue总结之前(一)

    在大概2016年6月吧,知道了vue,博客园有个博主用vue写了一个不算完整的博客园app,做出来的效果相比博客园原本的app看上去要华丽很多,那时候做前端还没多久,很多东西都不知道,别人说用vue开 ...

  9. 【C#】C#操作Excel文件(转)

    实现C#与Excel文件的交互操作,实现以下功能: 1.DataTable 导出到 Excel文件 2.Model数据实体导出到 Excel文件[List<Model>] 3.导出数据到模 ...

  10. timeStamp（时间戳） 事件属性

    Event 对象 定义和用法 timeStamp 事件属性可返回一个时间戳.指示发生事件的日期和时间(从 epoch 开始的毫秒数). epoch 是一个事件参考点.在这里,它是客户机启动的时间. 并 ...