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 ...
随机推荐
- 2018软工实践—Beta冲刺(3)
队名 火箭少男100 组长博客 林燊大哥 作业博客 Beta 冲鸭鸭鸭! 成员冲刺阶段情况 林燊(组长) 过去两天完成了哪些任务 软件接口编写修正 自动化测试脚本编写 技术文稿更新 展示GitHub当 ...
- 【CS231N】6、神经网络动态部分：损失函数等
一.疑问 二.知识点 1. 损失函数可视化 损失函数一般都是定义在高维度的空间中,这样要将其可视化就很困难.然而办法还是有的,在1个维度或者2个维度的方向上对高维空间进行切片,例如,随机生成一个权 ...
- jieba库的应用
#!/usr/bin/python# -*- coding:utf-8 -*- import imp,sys imp.reload(sys)from matplotlib.font_manager i ...
- beta 发布的相关评论
1. 礼物挑选小工具 飞天小女警 这个项目的创意独具匠心,贴近实际,令人耳目一新,网站的页面也是玫红色的,配色让人感到很温馨,对礼物的筛选方式很有趣,使用的记录特殊日子的方法来提醒自己挑选礼 ...
- ORA-03113：通信通道的文件结尾-完美解决方案
ORA-03113:通信通道的文件结尾-完美解决方案 oracle 文档中对这个错误这样解释: ORA-03113 错误就是说连接到数据库的网络中断了.有些错误由于频繁出现.原因复杂而被 Orac ...
- Eclipse_生成webservice客户端
1.工具:eclipse3.3或者是带有webservice插件的eclipse wsdl2java(这个本人没用过,具体长什么样不清楚) 2.步骤: 首先用浏览器访问webservice的站点,点击 ...
- Pygame - Python游戏编程入门(0) 转
博客刚开,想把最近学习的东西记录下来,算是一种笔记.最近打算开始学习Python,因为我感觉Python是一门很有意思的语言,很早以前就想学了(碍于懒),它的功能很强大,你可以用它来做科学运算,或者数 ...
- Spring Cloud之Eureka服务注册与发现
解决什么问题 ➟阐述微服务以及服务注册发现的部分概念 ➟阐述Eureka服务注册与发现的部分原理及细节 为什么需要服务中心 过去,每个应用都是一个CPU,一个主机上的单一系统.然而今天,随着大数据和云 ...
- linux yum 下载至本地及使用本地缓存安装包
由于网络安全的原因,服务器不允许上公网,有2种方案,解决这个问题 1.搭建yum服务器2.使用yum下载缓存进行封装,然后使用缓存安装 这里讲讲使用yum缓存封装 一.下载指定包及相关依赖 yum i ...
- Rotate Array II
Rotate an array of n elements to the right by k steps. For example, with n = 7 and k = 3, the array ...