vue 收缩动画

一路向北.　

已于 2023-03-21 14:31:56 修改

阅读量260

点赞数

文章标签： css javascript 前端

于 2023-03-21 11:33:05 首次发布

本文链接：https://blog.csdn.net/m0_70265923/article/details/129685065

版权

该代码示例展示了如何在Vue.js应用中使用el-button组件触发一个过渡效果，通过改变boxshow数据属性控制一个黑色方块的显示和隐藏。transition组件配合CSS动画(draw-enter,draw-leave-to)实现了方块平滑的展开和关闭动画。

摘要由CSDN通过智能技术生成

<template>
  <div>
    <el-button @click="boxshow = !boxshow">点击展开/关闭</el-button>
      <!--这里的name 和 css 类名第一个字段要一样-->
    <transition name="draw">
      <div class="box" v-if="boxshow"></div>
    </transition>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      boxshow: false,
    };
  },
};
</script>

<style scoped>
.box {
  width: 200px;
  height: 200px;
  background-color: black;
}
.draw-enter-active,
.draw-leave-active {
  transition: all 1s ease;
}
.draw-enter,
.draw-leave-to {
  height: 0;
}
</style>