vue2借助animate.css实现路由动画效果
第一步：
npm install animate.css --save
第二步：打开main.js
import animate from 'animate.css'Vue.use(animate)
<transition:duration="1000"mode="out-in"appearenter-active-class="animated fadeIn"leave-active-class="animated fadeOut"appear-active-class="animated zoomInDown"><router-view /></transition>
完成这三步之后，点击页面的每一个路由都会有动画效果了
vue2借助animate.css实现路由动画效果的更多相关文章
- animate.css引入实现动画效果
最近在网上看到很多代码都通过引入animate.css来实现动画效果,后来我便使用这种方法来尝试着写了个小案例,结果真的很好用,比我们通常情况下使用css或js实现动画效果好得多,便在此做个总结. 第 ...
- Flutter酷炫的路由动画效果
现在Flutter的路由效果已经非常不错了,能满足大部分App的需求,但是谁不希望自己的App更酷更炫那,下面介绍几个酷炫的路由动画. 其实路由动画的原理很简单,就是重写并继承PageRouterBu ...
- Nuxt的路由动画效果
Nuxt.js提供两种方法为路由提供动画效果,一种是全局的,一种是针对单独页面的 全局动画默认使用page来进行设置,例如现在我们为每个页面都设置一个进入和退出时的渐隐渐现的效果.我们可以先在根目录的 ...
- animate.css（第三方动画使用方法）
p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #a5b2b9 } animation 语法: animatio ...
- vue使用animate.css类库实现动画
首先安装animate.css类库 cnpm install animate.css –save 然后在vue的script文件中引用 import $ from '../assets/js/jque ...
- 第五章 动画 44：动画-使用第三方animate.css类库实现动画
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...
- css实现边框动画效果
最近写了几个页面都用到css动画,以及很多before,after伪类.在此记录一下成果.css边框循环动画,页面效果如下: 1.沿着边框动画的图形使用before,after伪类写的.当时想用切图来 ...
- vue2使用animate css
先上几个链接 vue插件大集合:awesome-vue vue2插件: vue2-animate:vue2-animate vue2插件vue2-animateDEMO: vue2-animatede ...
- css实现图片动画效果
需求 项目里有个消息中心,当有消息的时候,小铃铛图标可以晃两下,提示当前有信息. 实现过程 书写css 使用css的keyframe属性,配合animation. @keyframes ringing ...
随机推荐
- Servlet以流的形式返回图片
代码: import java.awt.image.BufferedImage; import java.io.File; import java.io.FileInputStream; import ...
- MAVEN教程--01安装|创建|解释
Maven是一个采用纯Java编写的开 源项目管理工具.Maven采用了一种被称之为project object model (POM)概念来管理项目,所有的项目配置信息都被定义在一个叫做POM.xm ...
- struts2.3.16.1+hibernate4.3.4+spring4.0.2
把之前的老项目用新的改了 发现新的有点很方便啊 Struts2+Hibernate+Spring整合 用的是 struts2.3.16.1 hibernate4.3.4 ...
- eg_8
问题描述:比较两数组是否相等 Demo_1: import java.util.Arrays; public class TestArray { public static void main(Str ...
- PTA计算平均值（一波三折）
PTA计算平均值( 一波三折) 现在为若干组整数分别计算平均值. 已知这些整数的绝对值都小于100,每组整数的数量不少于1个,不大于20个. 输入格式:首先输入K(不小于2,不大于20).接下来每一行 ...
- Hive与Hbase的区别
1. 两者分别是什么? Apache Hive是一个构建在Hadoop基础设施之上的数据仓库.通过Hive可以使用HQL语言查询存放在HDFS上的数据.HQL是一种类SQL语言,这种语言最终被 ...
- vue-cli 安装时 npm 报错 errno -4048
如何解决vue-cli 安装时 npm 报错 errno -4048 第一种解决方法:以管理身份运行cmd.exe 第二种解决办法:在dos窗口输入命令 npm cache clean --fo ...
- ACM数论之旅13---容斥原理（一切都是命运石之门的选择(=ﾟωﾟ)ﾉ）
容斥原理我初中就听老师说过了,不知道你们有没有听过(/≧▽≦)/ 百度百科说: 在计数时,必须注意没有重复,没有遗漏. 为了使重叠部分不被重复计算,人们研究出一种新的计数方法. 这种方法的基本思想是: ...
- java 基础 --静态
1. 静态变量和静态代码块是在JVM加载类的时候执行的(静态变量被赋值,以后再new时不会重新赋值),执行且只执行一次2. 独立于该类的任何对象,不依赖于特定的实例,被类的所有实例(对象)所共享3. ...
- delphi的ActionToolBar控件的使用 [问题点数：50分]
delphi那些默认图标在哪里就是那些Text,Label,Checkbox,显示在palette上面的那些图标. 上面的按钮是在ActionManager中添加的,让后拖到ActionToolBar ...