使用关键帧在屏幕上移动元素并返回

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-direction reverse，但animation-fill-mode 转发。这样，动画将从结尾开始，并停留在最后一个关键帧（回到顶部）。

但是还有一个额外的问题：一旦show 类被删除，它就会跳回到顶部，因为动画不再适用。为了防止这种情况，您可以将animation-name: mymove 添加到您的.mainNode。

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

在此处查看实际操作：https://codepen.io/anon/pen/jLgrjW