vue-transition-super

vue app 切换页面过渡动画插件

Usage no npm install needed!

<script type="module">
  import vueTransitionSuper from 'https://cdn.skypack.dev/vue-transition-super';
</script>

README

VueTransitionSuper

VueTransitionSuper组件是基于transiton内置组件的封装的一个自动监听页面的前进与后退操作并执行相应的切场过渡动画的组件,其中后退动作的监听是通过调用router.go(n)router.back触发,如果需要手动触发后退操作可以通过给组件绑定一个ref的方式通过调用this.$refs.refName.changeRoute()可告知组件当前切换动作属于后退操作执行响应的动画。

特性

  • 动画基于animate.css切换顺滑。
  • 使用简单直接包裹在router-view组件外层即可,无需再像使用<transition>一般监听动作修改动画名称等冗余且麻烦的操作。
  • 体积小,组件本身大小仅为8kb

用法

一个用于vue单页应用切换页面过渡动画的插件,使用方法如下:

npm i animate.css vue-transition-super -S

// main.js
import Vue from 'vue'
import VueTransitionSuper from 'vue-transition-super'
import "animate.css"
Vue.use(VueTransitionSuper, [option])

// app.vue
<transition-super ref="transitionSuper">
  <keep-alive>
    <router-view />
   </keep-alive>
</transition-super>

VueTransitionSuper组件的进场动画及离场动画可以自定义进行配置,可以通过对象的props项绑定animate.cssclass名称来配置切页进场离场过渡动画,除此之外你也可以按照自己的需求自定义切场动画并将相应的class名称作为props绑定到组件或是在注册组件时以option的形式传入,如果不想使用animate.css还可以通过绑定notUseAnimatetrue来屏蔽animate.css的动画class

Vue.use(VueTransitionSuper, option)option表示的是一个配置对象,配置项如下表,传入的配置项会作为组件的props默认值,它的优先级会低于通过v-bind传入的props

组件props 与 option

参数名 类型 默认值 描述
forwardeEnterActiveClass String|Array animate__bounceInLeft 路由前进时进场动画class名称, 如果想指定多个动画class可以bind一个Array
forwardeLeaveActiveClasslass String|Array animate__bounceOutRight 路由前进时离场动画class名称, 如果想指定多个动画class可以bind一个Array
backEnterActiveClasslass String|Array animate__bounceInRight 路由后退时进场动画class名称, 如果想指定多个动画class可以bind一个Array
backLeaveActiveClasslass String|Array animate__bounceOutLeft 路由后退时离场动画class名称, 如果想指定多个动画class可以bind一个Array
notUseAnimate Boolean false 不使用animate.css动画效果, 如果想指定多个动画class可以bind一个Array