文档中表明,添加过渡动画的前提有这几个
1.为元素添加v-if
或者v-show
2.将元素包裹在transition
标签中
3.为transition
标签设置name
属性,这个name
值就是后期样式的前缀
4.为六个时机设置合理的样式,vue
会在恰当的时机调用对应的样式
(进入:v-enter
,v-enter-active
,v-enter-to
)
(离开:v-leave
,v-leave -active
,v-leave -to
)
.<template>
<div>
<!-- 单击按钮时取反:显示时消失,消失时出现 -->
<button @click="isshow = !isshow">按钮</button>
<!-- 包裹在transition里面,vue提供了封装,可以给任何元素和组件添加进入/离开过渡 -->
<transition name="move"> <p v-show="isshow">我飘了</p> </transition>
</div>
</template>
<script>
export default {
data() {
return {
// 初始时隐藏
isshow: false,
};
},
};
</script>
.<style lang="less" scoped>
p {
width: 200px;
background: cadetblue;
}
// 开始进入
.move-enter {
margin-left: 300px;
opacity: 0;
}
// 进入中的过程
.move-enter-active {
transition: all 1s;
}
// 进入完毕
.move-enter-to {
margin-left: 0;
opacity: 1;
}
// 准备离开
.move-leave {
margin-left: 0;
opacity: 1;
}
// 离开的过程
.move-leave-active {
transition: all 1s;
}
// 离开完毕
.move-leave-to {
margin-left: 300px;
opacity: 0;
}
</style>