vue-transition-super v1.2.9

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.css的class名称来配置切页进场离场过渡动画，除此之外你也可以按照自己的需求自定义切场动画并将相应的class名称作为props绑定到组件或是在注册组件时以option的形式传入，如果不想使用animate.css还可以通过绑定notUseAnimate为true来屏蔽animate.css的动画class

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

组件props 与 option