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 ...
随机推荐
- delphi 图像处理 图像放大缩小
procedure TDR_QM_ZP_Form.btn_FDClick(Sender: TObject); //图像放大 begin my_int1 := Trunc( my_int1 * 1.1) ...
- spring冲刺第十天
调试运行,对整体的游戏方面进行改进.冲刺完了,但依然有很多问题,比如无法暂停,游戏结束后只能退出重来等
- CMD命令操作符
cmd command的缩写,是windows环境下的虚拟DOS窗口,提供有DOS命令,功能强大 mstsc 远程 inetmgr ...
- eclipse异常关闭，而Tomcat然在运行解决方法
1.eclipse异常关闭,而Tomcat然在运行,再启动tomcat会出现端口冲突 解决方法:打开任务管理器,找到javaw.exe,点击关闭,就可以了
- P4论文粗读笔记（一）
一 文章名称:SNAP: Stateful Network-Wide Abstractions for Packet Processing 数据包处理的带状态网络概念 发表时间:2016 期刊来源:S ...
- Mininet-Wifi 多接入点（Access Point）实验
实验简介 这个实验来自Mininet-Wifi用户手册.在本实验中,我们会创建一个有三个AP的线式拓扑,并有三个站点(station)与每个AP通过无线相连.将通过这个时间简单演示一些Mininet ...
- Leetcode题库——13.罗马数字转整数
@author: ZZQ @software: PyCharm @file: Luoma2Int.py @time: 2018/9/16 17:06 要求: 罗马数字转数字 字符 数值 I 1 V 5 ...
- git学习-综合性文章
文章:[转载]理解 Git 分支管理最佳实践 首先介绍了git各种分支:
- 用原生JS实现多张图片上传及预览功能（兼容IE8）
最近需要做一个图片上传预览的功能(兼容IE8-11.chrome.firefox等浏览器),网上现有的文件上传组件(如webuploader)总是会遇到一些兼容性问题.于是我参考了一些博文(链接找不到 ...
- 深入理解JAVA虚拟机阅读笔记2——垃圾回收
线程私有的程序计数器.虚拟机栈和本地方法栈随线程而生,随线程而灭.栈中的栈帧随方法的进入和退出有条不紊的入栈和出栈. 而Java堆和方法区因为需要多大内存.创建多少对象都是不确定的,因此这两个区域是垃 ...