Vue页面过渡( Page Transition)
made with Vuejs

Vue页面过渡( Page Transition)

这是一个页面/路由器过渡效果组件。

简介及使用教程

Vue Page Transition是一个页面/路由器过渡效果组件,一个简单轻巧的插件,可以为您的项目添加精彩的页面/路由器转换效果。

支持的效果:

  • Fade
    • Default Fade
    • Up
    • Right
    • Down
    • Left
  • Overlay
    • Overlay Up
    • Overlay Right
    • Overlay Down
    • Overlay Left
    • Overlay Down Full
    • Overlay Right Full
    • Overlay Up Full
    • Overlay Left Full
    • Overlay Up Down
    • Overlay Left Right
  • Flip
    • Flip X
    • Flip Y
  • Zoom
    • Default Zoom

安装

Npm

npm i vue-page-transition

Yarn

yarn add vue-page-transition

浏览器

<script src="vue.js"></script>
<script src="vue-typed-js/dist/vue-page-transition.browser.js"></script>

使用

引入并注册

import Vue from 'vue'
import VuePageTransition from 'vue-page-transition'

Vue.use(VuePageTransition)

基本用法:使用vue-page-transition组件包裹router-view即可

<vue-page-transition>
  <router-view/>
</vue-page-transition>

设置转场效果

<vue-page-transition mode="fade">
  <router-view/>
</vue-page-transition>

或者在路由中设置

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld,
      // overwrite default transition
      meta: { transition: 'zoom' },
    },
  ]
})

示例

作者

Orlando Wenzinger

@orlandster

相关项目

这是一个基于Vue.js的循环图像序列播放器。
这是一个基于Vue.js的模拟命令行效果的动画组件。
Vue.js的文本幻灯片组件。
这是一个基于Vue.js的内容切换组件。
这是一个使用Vue.js的加载Spinner的集合。
这是一个实现Material设计风格的纹波效果的插件。
这是一个基于Vue的emoji图标反馈组件。