javascript - Comment utiliser la transition vue2.0 pour obtenir l'effet de déplacer la souris vers le haut, de faire glisser le code QR hors de l'écran, de laisser le code QR et de glisser hors de l'écran.

Question

Comment utiliser la transition vue2.0 pour obtenir l'effet de déplacer la souris vers le haut, de faire glisser le code QR de l'extérieur de l'écran et de laisser le code QR glisser hors de l'écran. Voici le code que j'ai écrit,
Mais ce que j'ai écrit c'est : déplacement de la souris Montez, la boîte glisse, la souris ne part pas, mais la boîte a disparu, résolvez-la s'il vous plaît

.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

Changez-le par ce qui suit et essayez-le

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

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

Ou comme ça

.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

Le CSS ne peut pas être écrit comme ceci. Les classes .fade-enter-active, .fade-leave-active seront supprimées une fois l'animation terminée, ce sera donc votre style CSS d'origine. 2 Le code QR a encore disparu

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

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