数据可视化大屏项目开发中，需要开发一个宽度3200的数据大屏，大屏里左右各有两列数据中间是地图，左右两侧靠近中心的两列可以通过点击箭头进行展开和收缩。

点击箭头后展开状态下会进行收缩，收缩状态下会进行展开，完成动画后，箭头的方向会旋转180度。

演示地址

gsap实现推拉门的效果实例

实例代码

<template>
  <div class="home">
    <div class="homeMain">
      <!--      左侧遮罩-->
      <div class="zhezhaoLeft" ref="zhezhaoLeft">

      </div>
<!--      右侧遮罩-->
      <div class="zhezhaoRight" ref="zhezhaoRight"></div>
      <div class="homeMainLeft">
        <div class="homeMainLeft1">

        </div>
        <!--        左第二列-->
        <div class="homeMainLeft2" ref="homeMainLeft2">

          <div class="arrows">
            <img ref='arrowsLeft' @click="handleArrowsLeftClick" src="./assets/icon_jiantou2.png" alt="">
          </div>
        </div>
      </div>
      <!--      右侧-->
      <div class="homeMainRight">
        <!--        右第二列-->
        <div class="homeMainRight2" ref="homeMainRight2">
          <div class="arrows">
            <img ref='arrowsRight' @click="handleArrowsRightClick" src="./assets/icon_jiantou.png" alt="">
          </div>
        </div>
        <!--        右第一列-->
        <div class="homeMainRight1">
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import gsap from 'gsap'

export default {
  data() {
    return {}
  },
  methods: {
    // 左侧展开收缩
    handleArrowsLeftClick() {
      const homeMainLeft2 = this.$refs.homeMainLeft2;
      const zhezhaoLeft = this.$refs.zhezhaoLeft;
      const arrowsLeft = this.$refs.arrowsLeft;

      if (homeMainLeft2.style.left === '0px') {
        // 已经在左侧，需要右移
        gsap.to(zhezhaoLeft, {
          width: '50%', duration: 0.5, onComplete: () => {
          }
        });

        gsap.to(homeMainLeft2, {
          left: '30%',duration: 0.6, onComplete: () => {
            gsap.to(arrowsLeft, {rotation: 0});
          }
        });


      } else {
        // 在右侧，需要左移
        gsap.to(homeMainLeft2, {
          left: '0px', onComplete: () => {
            gsap.to(arrowsLeft, {rotation: 180});
          }
        });
        gsap.to(zhezhaoLeft, {
          width: '30%', onComplete: () => {
          }
        });
      }
    },
    // 右侧展开收缩
    handleArrowsRightClick() {
      const homeMainLeft2 = this.$refs.homeMainRight2;
      const zhezhaoRight = this.$refs.zhezhaoRight;
      const arrowsLeft = this.$refs.arrowsRight;

      if (homeMainLeft2.style.right === '0px') {
        // 已经在左侧，需要右移

        gsap.to(zhezhaoRight, {
          width: '50%', onComplete: () => {
          }
        });
        gsap.to(homeMainLeft2, {
          right: '30%', onComplete: () => {
            gsap.to(arrowsLeft, {rotation: 0});
          }
        });
      } else {
        // 在右侧，需要左移
        gsap.to(homeMainLeft2, {
          right: '0px', onComplete: () => {
            gsap.to(arrowsLeft, {rotation: 180});
          }
        });
        gsap.to(zhezhaoRight, {
          width: '32%', onComplete: () => {
          }
        });
      }
    }
  },
}
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  position: fixed;
  height: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  flex-wrap: nowrap;
  flex-direction: column;
  background: red;


  .homeMain {
    position: relative;
    z-index: 0;
    width: 100%;
    pointer-events: none;
    height: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    flex-direction: row;
    align-content: flex-start;

    .zhezhaoLeft {
      width: 50%;
      position: absolute;
      left: 0;
      background: url("./assets/bg.png"), url("./assets/bgleft.png");
      background-size: 50% 100%, 50% 100%;
      background-repeat: no-repeat, no-repeat;
      background-position: 0 0, right 0;
      height: 100%;
      z-index: 1;
      pointer-events: none;
    }

    .zhezhaoRight {
      width: 50%;
      pointer-events: none;
      position: absolute;
      right: 0;
      height: 100%;
      z-index: 1;
      background: url("./assets/bgRight.png"), url("./assets/bg.png");
      background-size: 50% 100%, 50% 100%;
      background-repeat: no-repeat, no-repeat;
      background-position: 0 0, right 0;
    }


    .homeMainLeft {
      width: 30%;
      height: calc(100% - 0px);
      position: relative;
      pointer-events: initial;
      display: flex;
      justify-content: flex-start;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;

      .homeMainLeft1 {
        position: relative;
        width: 30%;
        height: 100%;
        z-index: 3;
        background: #03223e;
      }

      .homeMainLeft2 {
        width: 50%;
        height: 100%;
        position: absolute;
        left: 50%;
        z-index: 2;

        .arrows {
          position: absolute;
          right: -50px;
          z-index: 10;
          top: 50%;

          img {
            cursor: pointer;
          }
        }

        //background: #0472a9;
      }
    }

    .homeMainRight {
      width: 30%;
      margin-right: 0px;
      position: relative;
      pointer-events: initial;
      height: calc(100% - 0px);
      margin-top: 0px;
      display: flex;


      justify-content: flex-end;
      align-items: center;
      flex-wrap: nowrap;
      flex-direction: row;
      align-content: flex-start;

      .homeMainRight1 {
        position: relative;
        width: 30%;
        height: 100%;
        z-index: 3;
        background: #03223e;

      }

      .homeMainRight2 {
        width: 50%;
        height: 100%;
        display: flex;
        z-index: 2;
        position: absolute;
        right: 50%;
        justify-content: space-between;
        align-items: center;
        flex-wrap: nowrap;
        flex-direction: column;
        align-content: flex-start;

        .arrows {
          position: absolute;
          left: -50px;
          z-index: 10;
          top: 50%;

          img {
            cursor: pointer;
          }
        }
      }
    }
  }
}

</style>

更多gsap动画效果汇总

gsap动画效果汇总

实例代码下载

代码基于vue3 vite js nodejs16开发