vue中怎样实现弹出层动画效果？由上而下渐渐显示---封装成复用组件

最新推荐文章于 2024-04-12 05:05:18 发布

江一铭

最新推荐文章于 2024-04-12 05:05:18 发布

阅读量2.2k

点赞数 3

分类专栏： # 组件模块 # Vue.js FE前端文章标签：渐入渐出弹出层

本文链接：https://blog.csdn.net/ZiChen_Jiang/article/details/108778275

版权

FE前端同时被 3 个专栏收录

257 篇文章 2 订阅

订阅专栏

Vue.js

104 篇文章 28 订阅

订阅专栏

组件模块

8 篇文章 1 订阅

订阅专栏

子组件：

<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>