第一步：

npm install animate.css --save

第二步：打开main.js

import animate from 'animate.css'
Vue.use(animate)
第三步：
<transition
:duration="1000"
mode="out-in"
appear
enter-active-class="animated fadeIn"
leave-active-class="animated fadeOut"
appear-active-class="animated zoomInDown">
<router-view />
</transition>

完成这三步之后，点击页面的每一个路由都会有动画效果了

1. vue2路由动画效果实现

2. 在vue中使用animate.css

3. Animate.css官网

4. animate.css的使用--小火柴

5. vue使用animate.css进行路由跳转

vue2借助animate.css实现路由动画效果的更多相关文章

  1. animate.css引入实现动画效果

    最近在网上看到很多代码都通过引入animate.css来实现动画效果,后来我便使用这种方法来尝试着写了个小案例,结果真的很好用,比我们通常情况下使用css或js实现动画效果好得多,便在此做个总结. 第 ...

  2. Flutter酷炫的路由动画效果

    现在Flutter的路由效果已经非常不错了,能满足大部分App的需求,但是谁不希望自己的App更酷更炫那,下面介绍几个酷炫的路由动画. 其实路由动画的原理很简单,就是重写并继承PageRouterBu ...

  3. Nuxt的路由动画效果

    Nuxt.js提供两种方法为路由提供动画效果,一种是全局的,一种是针对单独页面的 全局动画默认使用page来进行设置,例如现在我们为每个页面都设置一个进入和退出时的渐隐渐现的效果.我们可以先在根目录的 ...

  4. animate.css（第三方动画使用方法）

    p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 17.0px Monaco; color: #a5b2b9 } animation 语法: animatio ...

  5. vue使用animate.css类库实现动画

    首先安装animate.css类库 cnpm install animate.css –save 然后在vue的script文件中引用 import $ from '../assets/js/jque ...

  6. 第五章 动画 44：动画-使用第三方animate.css类库实现动画

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8&quo ...

  7. css实现边框动画效果

    最近写了几个页面都用到css动画,以及很多before,after伪类.在此记录一下成果.css边框循环动画,页面效果如下: 1.沿着边框动画的图形使用before,after伪类写的.当时想用切图来 ...

  8. vue2使用animate css

    先上几个链接 vue插件大集合:awesome-vue vue2插件: vue2-animate:vue2-animate vue2插件vue2-animateDEMO: vue2-animatede ...

  9. css实现图片动画效果

    需求 项目里有个消息中心,当有消息的时候,小铃铛图标可以晃两下,提示当前有信息. 实现过程 书写css 使用css的keyframe属性,配合animation. @keyframes ringing ...

随机推荐

  1. 今日事——Sprint计划会议

    一.   Sprint需求: 解屏提醒部分 界面设计 登录功能 备忘功能 成就系统 二．工作认领: 因有成员请假回家,所以延后认领,目前主要任务是学习如何在andriod平台开发并搭建开发环境. 网上 ...

  2. linux 常用命令-配置登陆方式

    使用阿里云服务器,启动实例(ubuntu 7.4,密码登录)后,通过xshell登陆,但是发现xshell中密码登录是灰色禁用的,很惆怅啊,明明设置的就是密码登录,在xshell中找了一通设置发现并没 ...

  3. FileInputStream与FileOutputStream练习题 -------------------图片拷贝

    package com.outputstream; import java.io.File; import java.io.FileInputStream; import java.io.FileNo ...

  4. 用jar包运行带GUI的java游戏

    这是从某论坛下载的java游戏demo,由于年代久远,所以没有记下出处.重要的是,这是一个带GUI的java程序. 链接: https://pan.baidu.com/s/1LjQ2bQPXvW-ti ...

  5. Visual Studio发展历程初浅调研

    名称 内部版本 发布日期 支持.NET Framework版本 核心功能 竞争对手 优缺点 Visual C++ 1.0 Visual Studio的最初原型 1992 把软件开发带入了可视化开发的时 ...

  6. error_reporting 报错

    <?php // 关闭所有PHP错误报告 error_reporting(0); // 报告简单的运行错误 error_reporting(E_ERROR | E_WARNING | E_PAR ...

  7. PHP 常用函数总结（二）

    4.PHP处理数据库的常用函数. 汇总表 PHP 5 MySQLi 函数 函数 描述 mysqli_affected_rows() 返回前一个 Mysql 操作的受影响行数. mysqli_autoc ...

  8. 【vue】import的使用

    以下是vue默认模板结构,自动加载HelloWorld (1)@ 等价于 /src 这个目录,避免写麻烦又易错的相对路径,是在webpack.base.config.js里面配置好别名 (2)impo ...

  9. MacOS & .DS_Store

    MacOS & .DS_Store .DS_Store === Desktop Services Store https://en.wikipedia.org/wiki/.DS_Store h ...

  10. springmvc+mybatis 处理图片(二)：显示图片

    数据库及配置文件等参考:springmvc+mybatis 处理图片(一):上传图片思路:把图片二进制信息写入到HttpServletResponse 的outputStream输出流中来显示图片.一 ...