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

一、实现元素的动画效果

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

实现代码

<el-button @click="show = !show">
      Toggle render
    </el-button>
<!--    盒子动画效果-->
<transition name="slide-fade"
            // 实现淡入淡出的动画效果
            enter-active-class='animate__animated animate__fadeInDown'
            leave-active-class='animate__animated animate__fadeOutUp'
            :duration="1000">
  <div v-if="show">
    <div class="div1"></div>
    <div class="div1"></div>
  </div>
</transition>

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

<!--    实现组件切换-->
<div class="components">
  <el-button @click="change">切换</el-button>
  <transition name="component-fade"
              enter-active-class='animate__animated animate__bounceIn'
              leave-active-class='animate__animated animate__bounceOut'
              mode="out-in">
<!--        动态组件切换通过 :is=”component“ 来实现-->
    <component :is="view" class="com"></component>
  </transition>
</div>

<script>
export default {
  name: 'Animate',
  components: {
    animate1: () => import('./animate1'),
    animate2: () => import('./animate2')
  },
  data () {
    return {
      view: 'animate1'
    }
  },
  methods: {
    change () {
      if (this.view === 'animate1') {
        this.view = 'animate2'
        console.log('animate2')
      } else {
        this.view = 'animate1'
        console.log('animate1')
      }
    }
  }
}
</script>

三、实现页面之间的切换

<template>
  <div id="app">
<!--    根据绑定的名字不同，使的跳转页面时动画效果不同-->
    <transition :name="transitionName">
      <router-view class="router"/>
    </transition>
  </div>
</template>

<script>
export default {
  name: 'App',
  watch: {
  $route (to, from) {
        // 切换动画
        // 页面之间的跳转一般由路由中的level来实现
        let level = this.$route.meta.level // 监听路由的层级
        console.log(level)
        if (level === 1) {
          this.transitionName = 'slide-right'
        } else {
          this.transitionName = 'slide-left'
        }
      }
    },
  data () {
    return {
      transitionName: 'slide-right' // 初始过渡动画方式
    }
  }
}
</script>

<style>
/*将页面前进或后退两种不同效果的动画都写下来*/
.slide-left-enter, .slide-right-leave-to {
  opacity: 0;
  transform: translateX(100%)
}

.slide-left-leave-to, .slide-right-enter {
  opacity: 0;
  transform: translateX(-100%)
}

.slide-left-enter-active, .slide-left-leave-active, .slide-right-enter-active, .slide-right-leave-active {
  transition: 1.5s;
  position: absolute;
  top:0;
}
</style>

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')
    }
  ]
})