<template>
<div id="bigData">
<button @click="flag= !flag">按钮1</button>
<transition>
<div v-show="this.flag">我要动起来1</div>
</transition>
<hr />
<button @click="flag2= !flag2">按钮2</button>
<transition name="my">
<div v-show="this.flag2">我要动起来2</div>
</transition>
</div>
</template>
<script>
export default {
data() {
return {
flag: true,
flag2: true
};
}
};
</script>
<style>
/*
v-enter 动画进入之前 此时还没开始进入
v-leave-to离开之后 终止状态
*/
.v-enter,
.v-leave-to {
opacity: 1;
transform: translateX(150px);
}
/*
v-leave-active 离场动画的时间段
v-enter-active 入场动画的时间段
*/
.v-leave-active,
.v-enter-active {
transition: all 0.8s ease;
opacity: 0.5;
}
/* ---------- */
/* my 自定义名称 区分不同组动画 */
/*
v-enter 动画进入之前 此时还没开始进入
v-leave-to离开之后 终止状态
*/
.my-enter,
.my-leave-to {
opacity: 1;
transform: translateY(150px);
}
/*
my-leave-active 离场动画的时间段
my-enter-active 入场动画的时间段
*/
.my-leave-active,
.my-enter-active {
transition: all 0.8s ease;
opacity: 0.5;
}
</style>