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 ...
随机推荐
- Mininet-Wifi 多接入点（Access Point）实验
实验简介 这个实验来自Mininet-Wifi用户手册.在本实验中,我们会创建一个有三个AP的线式拓扑,并有三个站点(station)与每个AP通过无线相连.将通过这个时间简单演示一些Mininet ...
- “吃神么，买神么”的第一个Sprint计划
一.现状 我们这个团队刚接触网络网站的制作,前台后台的链接,数据库链接等还刚刚了解,在制作过程中药边学习边制作. 持着一个尽力做的心. 二.部分需求索引卡 主要的任务是把我们的主页面先大概做出来 三. ...
- 浅学JavaScript
JavaScript是互联网上最流行的脚本语言,可广泛用于服务器.PC.笔记本电脑智能手机等设备: 对事件的反应: <!DOCTYPE html> <html> <hea ...
- angularJS1笔记-(6)-自定义过滤器
html: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...
- Beta阶段团队项目开发篇章2
例会时间: 2016.12.4 例会照片 个人工作 上阶段任务验收: 组员任务都已完成. 任务分配 组员 任务内容 韩慧敏 对调查问卷的结果进行分析和总结,确定Beta阶段各任务的优先级,撰写相关博客 ...
- 1014 C语言文法定义与C程序的推导过程
<程序> -> <外部声明> | <程序> <外部声明> <外部声明> -> <函数定义> | <声明> ...
- java 基础 --静态
1. 静态变量和静态代码块是在JVM加载类的时候执行的(静态变量被赋值,以后再new时不会重新赋值),执行且只执行一次2. 独立于该类的任何对象,不依赖于特定的实例,被类的所有实例(对象)所共享3. ...
- mysql实现消息队列
mysql之消息队列 消息队列:在消息的传输过程中保存消息的容器. 消息队列管理器在将消息从它的源中继到它的目标时充当中间人.队列的主要目的是提供路由并保证消息的传递:如果发送消息时接收者不可用, ...
- BZOJ5298 CQOI2018交错序列（动态规划+矩阵快速幂）
显然答案为Σkb·(n-k)a·C(n-k+1,k).并且可以发现ΣC(n-k,k)=fibn.但这实际上没有任何卵用. 纯组合看起来不太行得通,换个思路,考虑一个显然的dp,即设f[i][j][0/ ...
- BZOJ5289 HNOI/AHOI2018排列（贪心+堆）
题面描述的相当绕,其实就是如果ai=j,重排后ai要在aj之后.同时每个ai有附属属性wi,要求最大化重排后的Σiwi. 容易发现这事实上构成一张图,即由j向i连边.由于每个点入度为1或0,该图是基环 ...