javascript - Cara menggunakan peralihan vue2.0 untuk mencapai kesan menggerakkan tetikus ke atas, meluncur keluar kod QR dari luar skrin dan meninggalkan kod QR dan meluncur keluar dari skrin.

Question

Cara menggunakan peralihan vue2.0 untuk mencapai kesan menggerakkan tetikus ke atas, meluncur keluar kod QR dari luar skrin, dan membiarkan kod QR meluncur keluar dari skrin.
Tetapi apa yang saya tulis ialah: tetikus bergerak Naik, kotak itu tergelincir, tetikus tidak pergi, tetapi kotak itu telah hilang, tolong selesaikan

.erweima {

    position: fixed;
    left: -100px;
    bottom: 200px;
}
.fade-enter-active, .fade-leave-active {
    transition: all 1s ease;
    left: -100px;
}

.fade-enter, .fade-leave-active {
    left: 100px
}

<a class='wechat' href="" @mouseenter="show=!show" @mouseleave="show=!show"></a>

  <transition name='fade'>
             <p v-show="show" class="erweima" style="width: 100px; height: 100px;"><img src="../../static/img/image/wechat_hov.png" alt=""></p>
    </transition>

Answer 1

Tukar kepada yang berikut dan cuba

.fade-enter-active, .fade-leave-active {
    transition: all 1s ease;
}

.fade-enter, .fade-leave-active {
    transform：translateX(100px)
}

atau ini

.erweima{
  position: fixed;
  width: 100px; 
  height: 100px;
  left: 0;
}
.fade-enter-active, .fade-leave-active {
  transition: all 1s ease;

}
.fade-enter, .fade-leave-active {
  left: -100px;
}

Answer 2

Css tidak boleh ditulis seperti ini .fade-enter-active, .fade-leave-active kelas akan dialih keluar selepas animasi selesai, ia akan menjadi gaya css asal anda. 2 Kod QR hilang semula

.erweima {//这里需要写最终的显示状态，用v-if或v-show控制

    position: fixed;
    left: -100px;
    bottom: 200px;
}
.fade-enter-active, .fade-leave-active {
    transition: all 1s ease;
    left: -100px;//去掉这句，这个class不是最终状态
}