js同时展开或收起左右两个div

 

 <div class="carlineDetail animated" :class="[showHideBtn ? 'fadeInLeft' : 'fadeOutLeft']">

<div class="linediv">

          <div class="hideshowDiv" :class="[showHideBtn ? 'detailBtnHide' : 'detailBtnShow']">

            <img @click="showHideDetailBtn" :src="btnshowhide" :class="[showHideBtn ? 'el-icon-arrow-left' : 'el-icon-arrow-right']" />

          </div>

</div>

</div>

<div class="animated" :class="[showHideBtn ? ' fadeInRight' : 'fadeOutRight']" ></div>

js代码

//图片

import btnshowimg from '@/assets/imagemap/btnshow.png'

import btnhideimg from '@/assets/imagemap/btnhide.png'

data() {

    return {

      // 显示隐藏按钮

      btnshowhide: btnshowimg,

    }

}

    // 点击隐藏显示车辆、线路详情内容,动画过渡

    showHideDetailBtn() {

      this.showHideBtn = !this.showHideBtn

      if (this.showHideBtn) {

        this.btnshowhide = btnshowimg

      } else {

        this.btnshowhide = btnhideimg

      }

    },

css代码

.carlineDetail {

      width: 332px;

      height: 300px;

      font-size: 14px;

      margin-top: 88px;

      margin-left: 20px;

}

 

// 隐藏显示效果

.hideshowDiv {

      display: block;

      right: -16px;

      position: absolute;

      z-index: 101;

      cursor: pointer;

    }

    .fadeOutLeft.carlineDetail {

      margin-left: 0px;

    }

    .fadeInLeft.carlineDetail {

      margin-left: 20px;

    }

    // 隐藏显示效果end

//隐藏显示效果 @keyframes嵌套在@media中IE浏览器兼容问题

.animated {

  -moz-animation-duration: 1s;

  -ms-animation-duration: 1s;

  -webkit-animation-duration: 1s;

  animation-duration: 1s;

  -moz-animation-fill-mode: both;

  -ms-animation-fill-mode: both;

  -webkit-animation-fill-mode: both;

  animation-fill-mode: both;

}

.fadeInLeft {

  -moz-animation-name: fadeInLeft;

  -ms-animation-name: fadeInLeft;

  -webkit-animation-name: fadeInLeft;

  animation-name: fadeInLeft;

}

.fadeInRight {

  -moz-animation-name: fadeInRight;

  -ms-animation-name: fadeInRight;

  -webkit-animation-name: fadeInRight;

  animation-name: fadeInRight;

}

.fadeOutLeft {

  -moz-animation-name: fadeOutLeft;

  -ms-animation-name: fadeOutLeft;

  -webkit-animation-name: fadeOutLeft;

  animation-name: fadeOutLeft;

}

.fadeOutRight {

  -moz-animation-name: fadeOutRight;

  -ms-animation-name: fadeOutRight;

  -webkit-animation-name: fadeOutRight;

  animation-name: fadeOutRight;

}

@-webkit-keyframes fadeInLeft {

  0% {

    opacity: 0;

    transform: translateX(-100%);

    -webkit-transform: translateX(-100%);

    // -webkit-transform: translate3d(-100%, 0, 0);

    // transform: translate3d(-100%, 0, 0);

  }

}

@keyframes fadeInLeft {

  0% {

    opacity: 0;

    transform: translateX(-100%);

    -webkit-transform: translateX(-100%);

    -moz-transform: translateX(-100%);

    -ms-transform: translateX(-100%);

    // -moz-transform: translate3d(-100%, 0, 0);

    // -ms-transform: translate3d(-100%, 0, 0);

    // -webkit-transform: translate3d(-100%, 0, 0);

    // transform: translate3d(-100%, 0, 0);

  }

}

@-webkit-keyframes fadeInRight {

  0% {

    opacity: 0;

    transform: translateX(100%);

    -webkit-transform: translateX(100%);

    // -webkit-transform: translate3d(100%, 0, 0);

    // transform: translate3d(100%, 0, 0);

  }

}

@keyframes fadeInRight {

  0% {

    opacity: 0;

    transform: translateX(100%);

    -webkit-transform: translateX(100%);

    -moz-transform: translateX(100%);

    -ms-transform: translateX(100%);

    // -moz-transform: translate3d(100%, 0, 0);

    // -webkit-transform: translate3d(100%, 0, 0);

    // -ms-transform: translate3d(100%, 0, 0);

    // transform: translate3d(100%, 0, 0);

  }

}

@-webkit-keyframes fadeOutLeft {

  0% {

    opacity: 1;

  }

  100% {

    transform: translateX(-100%);

    -webkit-transform: translateX(-100%);

    // -webkit-transform: translate3d(-100%, 0, 0);

    // transform: translate3d(-100%, 0, 0);

  }

}

@keyframes fadeOutLeft {

  0% {

    opacity: 1;

  }

  100% {

    transform: translateX(-100%);

    -webkit-transform: translateX(-100%);

    -moz-transform: translateX(-100%);

    -ms-transform: translateX(-100%);

    // -moz-transform: translate3d(-100%, 0, 0);

    // -ms-transform: translate3d(-100%, 0, 0);

    // -webkit-transform: translate3d(-100%, 0, 0);

    // transform: translate3d(-100%, 0, 0);

  }

}

@-webkit-keyframes fadeOutRight {

  0% {

    opacity: 1;

  }

  100% {

    opacity: 0;

    transform: translateX(100%);

    -webkit-transform: translateX(100%);

    // -webkit-transform: translate3d(100%, 0, 0);

    // transform: translate3d(100%, 0, 0);

  }

}

@keyframes fadeOutRight {

  0% {

    opacity: 1;

  }

  100% {

    opacity: 0;

    transform: translateX(100%);

    -webkit-transform: translateX(100%);

    -moz-transform: translateX(100%);

    -ms-transform: translateX(100%);

    // -moz-transform: translate3d(100%, 0, 0);

    // -ms-transform: translate3d(100%, 0, 0);

    // -webkit-transform: translate3d(100%, 0, 0);

    // transform: translate3d(100%, 0, 0);

  }

}

//隐藏显示效果 @keyframes嵌套在@media中IE浏览器兼容问题 end