vue 结合transition实现点击切换显示隐藏

vue yekong 46℃

使用时需要先安装animate,没有安装animate的可以先看这里vue transition 结合 animate.css 实现动画过渡
实现效果如下
wanjunshijiecom 2021-09-10 at 07.18.47

//大块
    <transition name="custom-classes-transition" enter-active-class="animated slideInLeft"
                leave-active-class="animated slideOutLeft">
      <div class="cimbodyl" v-if="showleft">
        <div class="line"></div>
        <div class="ltitle">
          <span>选择小区</span>
          <img @click="showleft=false" src="../../assets/newimg/icon_shrinkage.png" alt="">
        </div>
        <div class="search">
          <input type="text">
          <div class="searchbut">
            <img src="../../assets/icon_search.png" alt="">
          </div>
        </div>
        <div class="address">
          <img src="../../assets/icon_city.png" alt="">
          <span>青岛市西海岸新区街道</span>
        </div>
        <tree></tree>
      </div>
    </transition>
//小块
    <transition name="custom-classes-transition" enter-active-class="animated slideInLeft"
                leave-active-class="animated slideOutLeft">
      <div class="selectVillage" v-if="!showleft" @click="showleft=true">
        <img class="cur" src="../../assets/newimg/selectVillage.png" alt="">
      </div>
    </transition>
喜欢 (2)