14.Vue3过渡和动画实现

1.认识动画

给组件显示和消失添加某种过渡动画,可以增加用户体验。
react本身不提供任何动画相关的API，需要使用第三方库react-transition-group
Vue提供一些内置组件和对应的API来完成动画，可以方便实现过渡动画效果。

<button @click="isshow=!isshow">显示/隐藏</button>
<h2 v-if="isshow">Hello World</h2>

没有动画的情况下，内容显示或隐藏会非常生硬，给单元素或者组件实现过渡动画，可以使用transition内置组件。

将要实现动画的单个元素或者组件嵌套再transition中，设置name。

<transition name="anima">
	<h2 v-if="isshow">Hello World</h2>
</transition>

在样式中设置过渡：

<style scoped>
	.anima-enter-from,
	.anima-leave-to{
		opacity: 0;
	}
	.anima-leave-from,
	.anima-enter-to{
		opacity: 1;
	}
	.anima-enter-active,
	.anima-leave-active{
		transition: opacity 2s ease;
	}
</style>

2.transition组件的原理

当插入或删除包含在transition组件的元素中时，vue将会做以下处理：
1.自动嗅探目标元素是否应用了CSS过渡或者动画，如果有，那么在恰当的时机添加/删除 CSS类名；
2.如果transition组件提供了JavaScript钩子函数，这些钩子函数在恰当的时机会被调用；
3.如果没有找到JavaScript钩子并且也没有检测到CSS过渡/动画，DOM插入、删除操作将会立即执行。

class的命名规则
如果我们使用的是一个没有name的transition，class的命名以v-作为默认前缀。
如果我们添加了一个name属性，例如：<transition name="anima">那么class