vue模拟点击购物车效果

  <transition name="slide-fade" v-show="show">
      <div class="hide-drug-detail" v-show="show">
        <div class="width-percent-100 drug-top">
          <div class="d-inline-block fl">
            <img src="https://ss2.bdstatic.com/8_V1bjqh_Q23odCf/pacific/1676851286.png" class="drug-img"/>
          </div>
          <div class="drug-info d-inline-block fl elps">
            <p class="drug-title elps">沙科舒复方沙棘籽油栓dd</p>
            <p class="drug-price">¥29.8</p>
          </div>
        </div>
       <div class="drug-line"></div>
        <div class="drug-buy-number">
          <div class="d-inline-block fl drug-buy">购买数量</div>
          <div class="d-inline-block fr">
            <span class="drug-reduce d-inline-block" @click="drugReduce()">－</span>
            <span class="drug-number d-inline-block">{{number}}</span>
            <span class="drug-add d-inline-block" @click="drugAdd()">+</span>
          </div>
        </div>
        <div class="drug-sure">确定</div>
      </div>
     </transition>  

/*定义进入过渡的结束状态*/
slide-fade-enter-active {
    transition:all 0.5s ease;

  }
  /* 定义离开过渡的结束状态*/
  .slide-fade-leave-active{
    transition:all 0.5s ease;
  }

  /*离开过渡的结束状态*/
  .slide-fade-leave-active {
    bottom:0rem!important;
  }

  .slide-fade-leave-to{
    bottom:-28rem!important;
  }

  /*进入过渡的开始状*/
  .slide-fade-enter{
    bottom:-22rem!important;
  }

“`

经过测试，实际上2句代码就可以，比较简单，哈哈，我是喜欢怎么简单怎么来，生活态度也是如此。
如下：

/定义进入过渡的结束状态/
.slide-fade-enter-active {
transition:all 0.5s ease;
}
/进入过渡的开始状/
.slide-fade-enter{
bottom:-22px!important;
}