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 ...
随机推荐
- 软工实践-Beta 冲刺 （2/7）
队名:起床一起肝活队 组长博客:博客链接 作业博客:班级博客本次作业的链接 组员情况 组员1(队长):白晨曦 过去两天完成了哪些任务 描述: 1.界面的修改与完善 展示GitHub当日代码/文档签入记 ...
- 团队作业4——第一次项目冲刺（Alpha版本）2017.11.14
1.当天站立式会议照片 本次会议在5号公寓1楼召开,本次会议内容:①:熟悉每个人想做的模块.②:根据老师的要求将项目划分成一系列小任务.③:选择项目的开发模式:jsp+servlet+javabean ...
- AVL树/线索二叉树
此文转载: http://www.cnblogs.com/skywang12345/p/3577360.html AVL树是一棵特殊的高度平衡的二叉树,每个节点的两棵子树高度最大差为1.所以在每次的删 ...
- ABP ModuleZero后台框架materialize禁止模拟select和checkbox
使用abp modulezero自带那个后台框架发现一个操蛋的问题,所有的select和checkbox都被改成div模拟的,虽然比原生美观,但有时候真的很难用. 比如说要用select做一个联动菜单 ...
- PAT 甲级 1142 Maximal Clique
https://pintia.cn/problem-sets/994805342720868352/problems/994805343979159552 A clique is a subset o ...
- Oracle Instant Client
下载地址: https://www.oracle.com/technetwork/database/database-technologies/instant-client/downloads/ind ...
- cnblog博客CSS定制
一.页面定制CSS #home { margin: 0 auto; width: 80%;/*原始65*/ min-width: 980px;/*页面顶部的宽度*/ background-color: ...
- 用java和junit编写app自动化测试用例
package myTest; import static org.junit.Assert.*; import io.appium.java_client.android.AndroidDriver ...
- BZOJ1853_幸运数字
如果一个数字仅由6或者8构成,那么这个数字是幸运数字:如果一个数字是幸运数字的倍数,那么就是近似的幸运数. 给定区间,求有多少个近似幸运数字位于这个区间之内. 典型的容斥原理. 首先,弄出所有的幸运数 ...
- 【刷题】BZOJ 3531 [Sdoi2014]旅行
Description S国有N个城市,编号从1到N.城市间用N-1条双向道路连接,满足 从一个城市出发可以到达其它所有城市.每个城市信仰不同的宗教,如飞天面条神教.隐形独角兽教.绝地教都是常见的信仰 ...