一、实现元素的动画效果
实现元素出现和离开的动画效果
实现代码
<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')}]})
