![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/c6d1db7e1e79aa8f92d620ac6b90d440.png)
# Vue动画
想要给谁加动画效果,就给谁包裹transition标签
transition默认会动态给被包裹元素添class样式:
v-enter:元素显示/插入前的效果,元素初始的位置 例如:transform: translateX(-200%);
v-active-enter:元素显示/插入的过渡时间和函数,初始前到最终的一个时间段 例如:transition: all 0.3s ease;
v-enter-to:元素显示/插入后的效果,元素最终的位置 例如:transform: translateX(-100%);
v-leave:元素隐藏/移除前的效果,例如:transform: translateX(0);
v-active-leave:元素隐藏/移除的过渡时间和函数,例如:transition: all 0.3s ease;
v-leave-to:元素隐藏/移除后的效果,例如:transform: translateX(100%);
v-enter-to与 v-leave 这个两个样式规定动画开始时元素的位置状态
v-leave-to与v-enter 这个两个样式规定动画结束后元素的位置状态
v-active-enter与 v-active-leave 这个两个样式代表执行动画的时间段 一般在这个阶段设置元素的过渡效果
给transition添加上name="xxx" 那么默认的样式就得是.xxx-enter-active name改变v
transition添加上:appear='true' 意思是组件已挂载,就会执行动画
transition标签不会渲染到页面上
'''js
<transition>
<div class="box" v-show="isShow"></div>
</transition>
'''
transition只能包裹一个根元素,只能给一个元素添加动画
给多个元素添加动画
需要使用transition-group包裹
并且transition-group包裹的元素需要绑定key
<template>
<div>
<button @click="showHide">显示与隐藏</button>
<transition :appear="true">
<div class="box" v-show="isShow"></div>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
isShow: true,
};
},
methods: {
showHide() {
this.isShow = !this.isShow;
},
},
};
</script>
<style scoped>
.box {
width: 300px;
height: 30px;
background-color: pink;
}
.v-enter,
.v-leave-to {
transform: translateX(-100%);
}
.v-enter-active,
.v-leave-active {
transition: 0.5s linear;
}
.v-enter-to,
.v-leave {
transform: translateX(0);
}
/* .v-enter-active {
animation: move 1s;
}
.v-leave-active {
animation: move 1s reverse;
} */
/* @keyframes move {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
} */
</style>