在屏幕上移動元素和背部使用關鍵幀

Question

提供我有以下代碼：

<div class="leftBox"> 
    <div class="mainNode"></div> 
</div> 
<script type="text/javascript"> 
$('.mainNode').click(function() { 
    var element = $('.mainNode'); 
    if (!element.hasClass('show')) { 
     element.removeClass('hide'); 
     element.addClass('show'); 
    } else { 
     element.removeClass('show'); 
     element.addClass('hide'); 
    } 
}) 
</script> 

和CSS：

.mainNode { 
    width: 160px; 
    height: 160px; 

    border-radius: 50%; 
    background-color: red; 
    position :relative; 
} 

.show { 
    -webkit-animation: mymove 1s forwards; /* Safari 4.0 - 8.0 */ 
    animation: mymove 1s forwards; 
} 

.hide { 
    -webkit-animation: mymove 1s reverse; /* Safari 4.0 - 8.0 */ 
    animation: mymove 1s reverse; 
} 

/* Safari 4.0 - 8.0 */ 
@-webkit-keyframes mymove { 
    from {top: 0px;} 
    to {top: 200px;} 
} 

/* Standard syntax */ 
@keyframes mymove { 
    from {top: 0px;} 
    to {top: 200px;} 
} 

我要找的是我的圈子移動到下的時候我用關鍵幀點擊它（將來我會有更多的）。

第一次點擊後，圓圈應該停留在底部，這已經發生在上面的代碼中。

但是，當我重新點擊該圓圈時，我希望它將相同的動畫反向並返回原始位置。還允許我在使用相同的動畫將其重新向下移動之後重新播放它...這目前不起作用。它向下移動並跳到頂部和底部，沒有動畫。

任何幫助，將不勝感激。

Here be my example

Answer 1

請試試這個。我盡力了。動畫每次都從上到下和從下到上工作。

$('.mainNode').click(function() { 
 
    var element = $('.mainNode'); 
 
    
 
    if (!element.hasClass('show')) { 
 
     element.removeClass('hide');   
 
     element.addClass('show'); 
 
     element.before(element.clone(true)).remove(); 
 
    } else { 
 
     element.removeClass('show');   
 
     element.addClass('hide'); 
 
     element.before(element.clone(true)).remove(); 
 
    }  
 
})

.mainNode { 
 
    width: 160px; 
 
    height: 160px; 
 
    border-radius: 50%; 
 
    background-color: red; 
 
    position :relative; 
 
} 
 

 
.show { 
 
    -webkit-animation: mymove 1s forwards; /* Safari 4.0 - 8.0 */ 
 
    animation: mymove 1s forwards; 
 
} 
 

 
.hide { 
 
    -webkit-animation: mymove1 1s forwards; /* Safari 4.0 - 8.0 */ 
 
    animation: mymove1 1s forwards; 
 
} 
 

 
/* Safari 4.0 - 8.0 */ 
 
@-webkit-keyframes mymove { 
 
    from {top: 0px;} 
 
    to {top: 200px;} 
 
} 
 

 
/* Standard syntax */ 
 
@keyframes mymove { 
 
    from {top: 0px;} 
 
    to {top: 200px;} 
 
} 
 
/* Safari 4.0 - 8.0 */ 
 
@-webkit-keyframes mymove1 { 
 
    from {top: 200px;} 
 
    to {top: 0px;} 
 
} 
 

 
/* Standard syntax */ 
 
@keyframes mymove1 { 
 
    from {top: 200px;} 
 
    to {top: 0px;} 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="leftBox"> 
 
    <div class="mainNode"></div> 
 
</div>

Answer 2

使用backwords，而不是扭轉它會爲你工作。

.hide { 
    -webkit-animation: mymove 1s backwards; /* Safari 4.0 - 8.0 */ 
    animation: mymove 1s backwards; 
    animation-delay: .2s; 
} 

Answer 3

你需要改變兩件事情，使這項工作：

.hide { 
    -webkit-animation: mymove 1s reverse forwards; /* Safari 4.0 - 8.0 */ 
    animation: mymove 1s reverse forwards; 
    animation-delay: .2s; 
} 

使用animation-directionreverse，但animation-fill-mode前鋒。這樣，動畫將從最後開始，並停留在最後一個關鍵幀（返回頂部）。

但還有一個額外的問題：一旦show類被刪除，它會跳回頂部，因爲動畫不再適用。爲了防止這種情況，您可以將animation-name: mymove添加到您的.mainNode。

.mainNode { 
    animation-name: mymove; 
    // Other properties... 
} 

看到它在這裏的行動：https://codepen.io/anon/pen/jLgrjW