1、展开收起动画
<template>
<button @click="show= !show">点击展开/关闭</button>
<!--这里的name 和 css 类名第一个字段要一样-->
<transition name="popup">
<div class="box" v-show="show"></div>
</transition>
</template>
<script>
export default {
data() {
return {
show:false,//默认隐藏
}
}
}
</script>
<style>
.box{
height:200px;
background:#000;
overflow: hidden;
}
.popup-enter-active, .popup-leave-active {
transition: all 1s ease;
}
.popup-enter, .popup-leave-to{
height: 0;
}
</style>
2、滑动隐藏动画
<template>
<button @click="show= !show">点击展开/关闭</button>
<!--这里的name 和 css 类名第一个字段要一样-->
<transition name="popup">
<div class="box" v-show="show"></div>
</transition>
</template>
<script>
export default {
data() {
return {
show:true,
}
}
}
</script>
<style>
.box{
height:200px;
width: 100%;
background-color:black;
}
/* 右测滑动进出 */
.leftFand-enter-active,.leftFand-leave-active {
transition: all .2s linear;
transform: translate3D(0, 0, 0);
}
.leftFand-enter,.leftFand-leave-to {
transform: translate3D(100%, 0, 0);
}
/* 左侧滑动进出 */
.leftFand-enter-active,.leftFand-leave-active {
transition: all .2s linear;
transform: translate3D(0, 0, 0);
}
.leftFand-enter,.leftFand-leave-to {
transform: translate3D(-100%, 0, 0);
}
/* 顶部滑动进出 不适合使用展开收起效果 (通常用于提示弹窗) */
.leftFand-enter-active,.leftFand-leave-active {
transition: all .2s linear;
transform: translate3D(0, 0, 0);
}
.leftFand-enter,.leftFand-leave-to {
transform: translate3D(0, 100%, 0);
}
</style>