vue中怎样实现弹出层动画效果?由上而下渐渐显示---封装成复用组件
子组件:
<template>
<div class="home">
<!-- 首先将要过渡的元素用transition包裹,并设置过渡的name -->
<transition name="mybox">
<div class="box" v-show="boxshow"></div>
</transition>
</div>
</template>
<script>
export default {
data() {
return {};
},
props: ["boxshow"],
methods: {},
};
</script>
<style lang="scss" scoped>
.box {
height: 500px;
background-color: rgb(245, 224, 224);
overflow: hidden;
}
/* 给过渡的name加样式 */
.mybox-leave-active,
.mybox-enter-active {
transition: all 1s ease;
}
.mybox-leave-active,
.mybox-enter {
height: 0px !important;
}
.mybox-leave,
.mybox-enter-active {
height: 500px;
}
</style>
父组件:
<template>
<div class="home">
<button @click="tcc">渐入渐出</button>
<Tcc :boxshow="boxshow" />
</div>
</template>
<script>
import Tcc from "../components/Tcc"; //导入弹出层组件
export default {
name: "name",
components: {
TCK,
Tcc,
},
data() {
return {
show: false,
boxshow: false,
};
},
methods: {
//动画弹出层
tcc: function () {
this.boxshow = !this.boxshow;
},
},
};
</script>
<style lang="scss" scoped>
</style>
效果