使用vue2.0 transition怎么完成鼠標(biāo)移上去，從屏幕外側(cè)滑出二維碼，離開二維碼滑出屏幕的效果，以下是我寫的代碼，
但是我寫的下過卻是：鼠標(biāo)移上去，盒子是滑動(dòng)過來的，鼠標(biāo)沒離開，盒子卻已經(jīng)消失了，求解
.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>
2
0
0
認(rèn)證高級(jí)PHP講師
改成下面試試
.fade-enter-active, .fade-leave-active {
transition: all 1s ease;
}
.fade-enter, .fade-leave-active {
transform：translateX(100px)
}或者這樣
.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;
}
css不能這樣寫，.fade-enter-active, .fade-leave-active這些class都會(huì)在動(dòng)畫完成后移除的，移除后又是你的原來的css樣式了，所以，動(dòng)畫執(zhí)行完，二維碼又消失了
.erweima {//這里需要寫最終的顯示狀態(tài)，用v-if或v-show控制
position: fixed;
left: -100px;
bottom: 200px;
}
.fade-enter-active, .fade-leave-active {
transition: all 1s ease;
left: -100px;//去掉這句，這個(gè)class不是最終狀態(tài)
}
