vue使用动画——实现元素切换、组件切换、页面切换的动画效果

一、实现元素的动画效果

实现元素出现和离开的动画效果

实现代码

      Toggle render
    


  

    

    

  

二、实现组件间的切换效果

  切换
  

    
  

三、实现页面之间的切换

router页面

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      meta: {level: 1},
      component: HelloWorld
    }, {
      path: '/slot',
      name: 'Slot',
      meta: {level: 2},
      component: () => import('@/components/slot/Slot')
    }, {
      path: '/animate',
      name: 'Animate',
      meta: {level: 2},
      component: () => import('@/components/animate/Animate')
    }, {
      path: '/v-promise',
      name: 'V-promise',
      meta: {level: 2},
      component: () => import('@/components/v-demo/V-promise')
    }
  ]
})