左右侧滑动窗口

html代码

    <div class="task-list-container">
      <div class="task-list">
         </div>

      <div id="arrow" class="arrow" @click="popupTaskList"></div>
    </div>

  <!-- 右侧对比查询框 -->

  <div class="task-list-container-right">
      <div class="task-list-right">
        
      </div>
      <div id="arrow-right" class="arrow-right" @click="popupTaskList_right"></div>
    </div>

js代码

 popupTaskList(event) {
        console.log(event)
        if (!this.taskListOpened) {
          this.taskListOptions = []
          this.taskListOptionsBackup = []
          this.taskListOpened = true
          event.target.parentElement.firstChild.classList.remove('task-list-close')
          event.target.parentElement.firstChild.classList.add('task-list-open')
          event.target.classList.remove('task-list-arrow-pushin')
          event.target.classList.add('task-list-arrow-popup')
          this.taskItems = []
          this.imageItems = []
        } else {
          this.taskListOpened = false
          event.target.parentElement.firstChild.classList.remove('task-list-open')
          event.target.parentElement.firstChild.classList.add('task-list-close')
          event.target.classList.remove('task-list-arrow-popup')
          
          event.target.classList.add('task-list-arrow-pushin')
          
          this.taskItems = []
        }
      },

      popupTaskList_right(event) {
        console.log(event)
       if (!this.taskListRightOpened) {
          this.taskListRightOptions = []
          this.taskListRightOptionsBackup = []
          this.taskListRightOpened = true
          event.target.parentElement.firstChild.classList.remove('task-list-close-right')
          event.target.parentElement.firstChild.classList.add('task-list-open-right')
          event.target.classList.remove('task-list-arrow-pushin-right')
          event.target.classList.add('task-list-arrow-popup-right')
          this.taskRightItems = []
          this.imageRightItems = []
        } else {
          this.taskListRightOpened = false
          event.target.parentElement.firstChild.classList.remove('task-list-open-right')
          event.target.parentElement.firstChild.classList.add('task-list-close-right')
          event.target.classList.remove('task-list-arrow-popup-right')
          
          event.target.classList.add('task-list-arrow-pushin-right')
          
          this.taskRightItems = []
        }

css样式

/* 左侧滑框 */
  .task-list-container {
    display: flex;
    position: absolute;
    left: -260px;
    top: 160px;
     540px;
    height: 550px;  
  }

  .task-list {
    position: absolute;
     260px;
    height: 550px;
    border-radius: 0px 4px 4px 0px;
    background: #082030;
    opacity: 0.9;
    border-radius: 0px 4px 4px 0px;
  }

  .arrow {
    position: absolute;
    left: 260px;
    top: 200px;
     20px;
    height: 90px;
    background: url("../assets/index/弹出.png") no-repeat;
    background-size: contain;
    opacity: 0.8;
    border-radius: 0px 6px 6px 0px;
    cursor: pointer;
  }

  .task-list-open {
    animation: taskListOpenAnimation 3s ease;
    left: 260px;
  }

  @keyframes taskListOpenAnimation {
    from {
      left: 0px;
    }
    to {
      left: 260px;
    }
  }

  .task-list-arrow-popup {
    animation: taskListArrowPopupAnimation 3s ease;
    left: 520px;
    background: url("../assets/index/收回.png") no-repeat;
    background-size: contain;
  }

  @keyframes taskListArrowPopupAnimation {
    from {
      left: 260px;
    }
    to {
      left: 520px;
    }
  }

  .task-list-arrow-pushin {
    animation: taskListArrowPushinAnimation 3s ease;
    left: 260px;
  }

  @keyframes taskListArrowPushinAnimation {
    from {
      left: 520px;
    }
    to {
      left: 260px;
    }
  }

  .task-list-close {
    animation: taskListCloseAnimation 3s ease;
  }

  @keyframes taskListCloseAnimation {
    from {
      left: 260px;
    }
    to {
      left: 0px;
    }
  }


/* 右侧滑框 */
  .task-list-container-right {

    flex-direction: row-reverse; 
    display: flex;
     position: fixed; /*固定用*/
    right: -260px;
    top: 160px;
     540px;
    height: 550px;  
  }

  .task-list-right {
    position: absolute;
     260px;
    /* right: -100px; */
    height: 550px;
    border-radius: 0px 4px 4px 0px;
    background: #082030;
    opacity: 0.9;
    
  }

  .arrow-right {
    position: absolute;
    right: 260px;
    top: 200px;
     20px;
    height: 90px;

 </div>