vue3中的过渡与动画

transition组件：

在vue3中通过transition组件来给过程添加动画，将要增加过渡动画的元素放到transition组件内。

<transition name="exam">
	<div>你好</div>
</transition>

transition组件有6个过渡的class（v-指代的就是transition中定义的name属性，默认为v-，我们只需要在对应状态的类中规定该状态的样式就可以实现过渡效果了）

以上面的transition组件为例：

• exam-enter-from/exam-leave-from：对应过渡进入/离开的开始状态
• exam-enter-active/exam-leave-active：对应过渡进入/离开生效时的状态
• exam-enter-to/exam-leave-to：对应过渡进入/离开的结束状态

使用transition-property可以同时设置多个属性。

transition-group：

在transition组件中只能对每次渲染一个节点的情况生效，如果想对一个列表的内容进行动画渲染，可以使用transition-group。

<transition-group tag="ul" name"list">
	<li v-for="item in array" :key="item">{{item}}</li>
</transition-group>

使用tag可以指定transition-group渲染成一个页面元素，这里我们将其渲染为一个ul标签。

当我们使用transition-group对列表进行增删元素的时候，在操作这些元素的位置变化时，由于DOM文档流的变化，会同时引起其他邻近节点元素的位置变化。我们可以使用transition-group提供的v-move类，在元素定位被改变时使用，对于这些“被动移动”的元素也可以实现过渡。

.exam-move{
	transition:transform 0.5s linear
}

组件之间的过渡：

组件过渡的方法与transition的使用方法完全一样，只需要将需要过渡的组件包裹到transition组件下进行渲染就可以。