点击展开伸缩功能

小韩本韩！

已于 2024-01-24 15:21:53 修改

阅读量439

点赞数 8

文章标签： css css3 html

于 2024-01-24 12:54:41 首次发布

本文链接：https://blog.csdn.net/m0_71645665/article/details/135819281

版权

文章展示了如何在Vue2项目中使用模板和CSS动画实现一个组件的收缩与展开效果，通过JavaScript控制元素的宽度变化和类名切换以触发动画。

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

直接上代码vue2代码

<template>
  <div class="">
   
    <div class="box">

      <div class="left" :class="tag ? 'animationIn' : 'animationOut'">
        11
      </div>
      <div class="right">
        <div class="btn" @click="tag = !tag">
           <button >点击</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: '',
  components: {},
  data() {
    // 这里存放数据
    return {
      tag: true
    }
  }
}
</script>

<style lang="scss" scoped>
.btn {
  
  /* 子元素设置绝对定位 */
  position: absolute;
  top: 50%;
  left: -3%;
}
.box {
  display: flex;
  width: 600px;
  height: 500px;

  .animationIn {
    animation: myAnimationIn 1s;
  }

  .animationOut {
    animation: myAnimationOut 1s forwards;
  }

  .left {
    width: 100px;
    background: rgba(255, 123, 0, 0.358);
    overflow: hidden;
    margin-right: 10px;

  }

  .right {
    flex: 1;
    background: rgba(255, 255, 0, 0.646);

    /* 父元素设置相对定位 */
    position: relative;

  }

  @keyframes myAnimationIn {
    0% {
      width: 0;
    }

    100% {
      width: 100px;
    }
  }

  @keyframes myAnimationOut {
    0% {
      width: 100px;
    }

    100% {
      width: 0;
    }
  }
}
</style>