国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

Community

Learn

Tools Library

AI Tools

Leisure

English

javascript - How to use vue2.0 transition to achieve the effect of moving the mouse up, sliding the QR code out from the outside of the screen, and leaving the QR code and sliding out of the screen.

PHP中文網(wǎng) 2017-05-19 10:30:36

961

How to use vue2.0 transition to complete the effect of moving the mouse up, sliding out the QR code from the outside of the screen, leaving the QR code and sliding out of the screen. The following is the code I wrote,
But what I wrote failed Yes: When the mouse is moved up, the box slides over, but the box disappears without leaving the mouse. Solution

.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>

PHP中文網(wǎng)

認證高級PHP講師

reply all(2)

伊謝爾倫2017-05-19 10:32:36 2 floor

Change it to the following and try it

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

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

Or like this

.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;
}

Like +0

Add Reply

迷茫2017-05-19 10:32:36 1 floor

Css cannot be written like this. .fade-enter-active, .fade-leave-active classes will be removed after the animation is completed. After removal, it will be your original css style. Therefore, after the animation is executed, 2 The QR code disappeared again

.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;//去掉這句，這個class不是最終狀態(tài)
}

Like +0

Add Reply