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

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

我正在寻找的是，当我使用关键帧单击我的圆圈时，它会移动到底部（我以后会有更多）。

第一次点击后圆圈应该停留在底部，上面的代码已经发生了这种情况。

但是，当我重新单击圆圈时，我希望它反向执行相同的动画并 return 到原始位置。还允许我在使用相同的动画将其向下移动后重新单击它...这目前无法正常工作。它向下移动并在没有动画的情况下跳到顶部和底部。

如有任何帮助，我们将不胜感激。

Here be my example

Answer 1

使用反向词而不是反向词它会适合你。

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

Answer 2

您需要更改两件事才能使其正常工作：

.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 class，它就会跳回顶部，因为动画不再适用。为防止这种情况，您可以将 animation-name: mymove 添加到 .mainNode.

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

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

Answer 3

请试试这个。我尽力了。动画每次都从上到下和从下到上工作。

$('.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>

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

Moving element on screen and back with keyframes

javascript

css

animation

keyframe

css-animations