**** Vue2与Vue3 中 过渡动画 是有一丢丢区别的 。
Vue 提供了transition的封装组件，在下列情形中，可以给任何元素和组件添加进入/离开过渡
条件渲染 (使用v-if)条件展示 (使用v-show)动态组件组件根节点
例如： 在transition标签不给name属性时，默认为 .v-enter
<div id="demo"><button v-on:click="show = !show">Toggle</button><transition name="fade"><p v-if="show">hello</p></transition></div>new Vue({el: '#demo',data: {show: true}}).fade-enter-active, .fade-leave-active {transition: opacity .5s;}.fade-enter, .fade-leave-to {opacity: 0;}
Vue2 :
Vue3 :
vue3与2的区别在于
由.v-enter => .v-enter-from 其他属性不变
例vue3中过渡加动画
在main.js中
组件页面要定位，否则会卡顿
<template><router-view v-slot="{ Component }"><transition name="translate"><component :is="Component" /></transition></router-view></template><style lang="scss">* {margin: 0;padding: 0;list-style: none;}html,body,#app,.home,.login,.about {height: 100%;}#app {position: relative;}.home,.login,.about {position: absolute;top: 0;left: 0;width: 100%;}.translate-enter-active {animation: info 1s;}.translate-leave-active {animation: rotate 1s linear;}@keyframes info {0% {transform: translate(100%);}100% {transform: translate(0%);}}@keyframes rotate {0% {transform: translate(0%);}100% {transform: translate(-100%) rotateZ(-180deg);transform-origin: left top;}}</style>
