尚硅谷的vue旅程13-vue中的过渡与动画(transition等)

简介

一.
	指定过渡动画的步骤:
			1.在目标元素外面包裹<transition name="xxx">
			2.为name名指定CSS样式
					指定过度样式transition(css3的属性)
					指定隐藏时的样式：opacity/或者其他(width等等)

二.
	1.操作 css 的 transition 或 animation

	2.vue 会给目标元素添加/移除特定的 class

	3.过渡的相关类名:
			xxx-enter-active：指定显示的 transition
			xxx-leave-active：指定隐藏的 transition
			xxx-enter/xxx-leave-to：指定隐藏时的样式

代码示例

<style>
	/* demo1 */
	/* 显示/隐藏的过渡效果 */
	.xxx-enter-active,.xxx-leave-active{
    
		transition: opacity 1s;
	}
	/* 隐藏时的样式 */
	.xxx-enter,.xxx-leave-to{
    
		opacity: 0;
	}
	
	
	/* demo2 */
	/* 显示的过渡效果 */
	.yyy-enter-active{
    
		transition: all 1s;
		/* transform: translateX(20px); */
	}
	/* 隐藏时的过渡效果 */
	.yyy-leave-active{