本文讨论的 animinate.css 为 v 4.x版本，3.x版本需调整 class 类名
前言 vue中引入使用 animinate.css
安装：
Install with npm:
npm install animate.css --save • 1
with yarn:
yarn add animate.css
引入
main.js
import animated from "animate.css"; Vue.use(animated);
组件中使用
每个动画名前面都要有 animate__animated
<h1 class="animate__animated animate__bounce">An animated element</h1>
1. vue-router 设置过渡动画
1.1 基本语法
- 这里配合 < keep-alive > 使用，因为 keep-alive 可以缓存数据。这样前进、后退后，之前路由组件的数据仍然保留，下次再访问时就不需要重新渲染。
- 动画方面没有使用自定义的过渡样式，而是使用 animinate.css 提供的效果。
<template> <div id="app"> <transition mode="out-in" enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut"> <keep-alive> <router-view/> </keep-alive> </transition> </div> </template> <script> export default { data(){ return{ } }, } </script>
效果图
1.2 不同情况使用不同的跳转动画
上面样例中可以发现，不管是从哪个页面跳转到哪个页面，过渡效果都是淡入淡出。
下面我们对其作个功能改进：
上面样例中可以发现，不管是从哪个页面跳转到哪个页面，过渡效果都是淡入淡出。
下面我们对其作个功能改进：
// 在路由文件（router\index.js）中，在每个路径的路由元信息 meta 中设置个 depth 属性值，用来表示其路由的深度（层级） import Vue from 'vue' import VueRouter from 'vue-router' Vue.use(VueRouter) const routes = [ { path: '/', name: 'nav.Home', component: () => import('../views/Home.vue'), meta:{depth:1} }, { path: '/test', name: 'nav.Test', component: () => import('../views/Test.vue'), meta:{depth:2} } ] const router = new VueRouter({ routes }) export default router
// 监听 $route，根据 to、from 元信息中的 depth 值的大小，设置不同的跳转动画 <template> <div id="app"> <transition :enter-active-class="enterTransition" :leave-active-class="leaveTransition"> <keep-alive> <router-view class="routeView"/> </keep-alive> </transition> </div> </template> <script> export default { data(){ return{ enterTransition: 'animate__animated animate__fadeIn', leaveTransition: 'animate__animated animate__fadeOut', } }, watch:{ '$route' (to, from) { let toDepth = to.meta.depth; let fromDepth = from.meta.depth; if (fromDepth > toDepth) { this.enterTransition = 'animate__animated animate__fadeInLeft'; this.leaveTransition = 'animate__animated animate__fadeOutRight'; } else if (fromDepth < toDepth) { this.enterTransition = 'animate__animated animate__fadeInRight'; this.leaveTransition = 'animate__animated animate__fadeOutLeft'; } else { this.enterTransition = 'animate__animated animate__fadeIn'; this.leaveTransition = 'animate__animated animate__fadeOut'; } } } } </script> <style> /* 去除切换间的留白 */ .routeView{ position:absolute; left:0; right:0; top:0; bottom:0; } </style>
效果图
2. vue-navigation 设置过渡动画
2.1 基本用法
<template> <div id="app"> <transition mode="out-in" enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut"> <navigation> <router-view/> </navigation> </transition> </div> </template>
2.2 不同情况使用不同的跳转动画
- 当在使用 vue-router 进行路由导航时，如果想实现前进后退使用不同过渡动画，需要在路由文件中进行相应的配置，这样略显麻烦;
- 而如果项目中使用的是 vue-navigation 这个导航库话那就十分简单了，因为它可以识别除路由的前进后退，无须对 router 进行多余的设置。
<template> <div id="app"> <transition :enter-active-class="enterTransition" :leave-active-class="leaveTransition"> <navigation> <router-view/> </navigation> </transition> </div> </template> <script> export default { name: 'App', data () { return { enterTransition: 'animate__animated animate__fadeIn', leaveTransition: 'animate__animated animate__fadeOut', } }, created() { this.$navigation.on('forward', (to, from) => { this.enterTransition = 'animate__animated animate__fadeInRight'; this.leaveTransition = 'animate__animated animate__fadeOutLeft'; }) this.$navigation.on('back', (to, from) => { this.enterTransition = 'animate__animated animate__fadeInLeft'; this.leaveTransition = 'animate__animated animate__fadeOutRight'; }) this.$navigation.on('replace', (to, from) => { this.enterTransition = 'aanimate__animated animate__fadeIn'; this.leaveTransition = 'animate__animated animate__fadeOut'; }) } } </script>
