标签：tran pac col 进入 ansi 前言 aci span out
Vue版本：2.6.1
前言：本文主要是为了分清Vue的过渡状态中，什么是进入，什么是离开
一、进入（enter），即从无到有、从隐藏到显示（或添加节点）的阶段，与当前需要过渡元素的显示隐藏无关
离开（leave），即从有到无、从显示到隐藏（或删除节点）的阶段，与当前需要过渡元素的显示隐藏无关
二、使用透明度作为元素的过渡
1）当需要过渡元素为显示状态时
/* 当需要过渡的元素为显示状态时， 则过渡的顺序应该是:显——隐——显 显示到隐藏为“离开”阶段，即leave 隐藏到显示为“进入”阶段，即enter 因为，过渡状态会先“离开”,再“进入” */ /* 离开 */ .v-leave{ opacity: 1; } .v-leave-to{ opacity: 0; } .v-leave-active{ transition: all 1s ease-in-out; } /* 进入 */ .v-enter{ opacity: 0; } .v-enter-to{ opacity: 1; } .v-enter-active{ transition: all 1s ease-in-out; }
2）当需要过渡元素为隐藏状态时
/* 当需要过渡的元素为隐藏状态时， 则过渡的顺序应该是:隐-显-隐 隐藏到显示为“进入”阶段，即enter 显示到隐藏为“离开”阶段，即leave 因为，过渡状态会先“进入”,再“离开” */ /* 进入 */ .v-enter{ opacity: 0; } .v-enter-to{ opacity: 1; } .v-enter-active{ transition: all 1s ease-in-out; } /* 离开 */ .v-leave{ opacity: 1; } .v-leave-to{ opacity: 0; } .v-leave-active{ transition: all 1s ease-in-out; }
总结：上述两段代码仔细对比，会发现两段代码其实是一样的，由此得出：无论需要过渡的元素是显示还是隐藏，都对过渡动画css的编写无任何影响
标签：tran pac col 进入 ansi 前言 aci span out
原文地址：https://www.cnblogs.com/bulici/p/14659073.html
