√vue内置组件

√vue内置组件transition

• transition用于元素 插入、移除和更新 的过渡效果
• transition的className的6个名称
  • v-enter：过渡开始状态，在元素被插入之前生效，在元素被插入之后的下一帧移除。
  • v-enter-active：定义进入过渡生效时的状态。在整个进入过渡的阶段中应用，在元素被插入之前生效，在过渡/动画完成之后移除
  • v-enter-to:定义进入过渡的结束状态。在元素被插入之后下一帧生效 (与此同时 v-enter 被移除)，在过渡/动画完成之后移除。
  • v-leave: 定义离开过渡的开始状态。在离开过渡被触发时立刻生效，下一帧被移除。
  • v-leave-active：定义离开过渡生效时的状态。在整个离开过渡的阶段中应用，在离开过渡被触发时立刻生效，在过渡/动画完成之后移除。
  • v-leave-to: 定义离开过渡的结束状态。在离开过渡被触发之后下一帧生效 (与此同时 v-leave 被删除)，在过渡/动画完成之后移除。
• v-for循环创建多个过渡的可以使用<transition-group>,v-move为group组设置的
• transition也可以使用js进行动画设置

<transition
v-on:before-enter="beforeEnter" // 动画开始前，设置初始状态
v-on:enter="enter" // 执行动画
v-on:after-enter="afterEnter" // 动画结束，清理工作
v-on:enter-cancelled="enterCancelled" // 取消动画
v-on:before-leave="beforeLeave"
v-on:leave="leave"
v-on:after-leave="afterLeave"
v-on:leave-cancelled="leaveCancelled"
></transition>
<script>
methods: {
	beforeEnter(el) {
	el.style.opacity = 0 // 设置初始状态
	},
	enter(el, done) {
	document.body.offsetHeight; // 触发回流激活动画
	el.style.opacity = 1 // 设置结束状态
	}
}
</script>