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

请试试这个。我尽力了。动画每次都是从上到下，从下到上。

＆＃13;

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

＆＃13;

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

＆＃13;

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

＆＃13;

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

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

3 个答案: