vue中实现动画非常简单，只需要配置固定的类名，v-enter,动画初始时样式，v-leave动画结束时样式 以及v-enter-active进来时的animation属性，v-leave-active离开时的animation属性
动画实现动画效果
//需要动画的div
<template>
<tarnsitions>
<div class=“root”>
</div>
</transitions>
</template>
<style>
//进入动画
v-enter{
abimation: anim 1s
}
//离开动画
v-leave{
abimation: anim 1s
}
//配置动画
@keyframes anim {
//内容
}
</style>
使用时只需要配置keyframes便可以了
如果transitions标签有name属性，就可以吧 v-enter和v-leave的v换成那么属性值
过度实现动画效果
<template>
<tarnsitions>
<div class=“root”>
</div>
</transitions>
</template>
<style>
//开始的起点，是回来的终点，所以可以写在一起
v-enter,
v-leave-to
{
transfrom：transitionX(-100%)
}
//开始的终点，是回来的起点，所以可以写在一起
v-enter-to,
v-leave
{
transfrom：transitionX(0)
}
只需要配置完这个，vue会自动在元素显示隐藏时添加calss，实现动画
</style>
直接配合boostrape使用，更便捷
<template>
//直接把样式class写进去，便可以实现
<tarnsitions enter-class=“” leave-class="">
<div class=“root”>
</div>
</transitions>
</template>
