javascript - 来回动画 div

Question

我不是专家开发人员。我正在寻求一些帮助。

我试图使用toggleClass让div来回移动；

$('div').on('click', function() {
    $(this).toggleClass('active');
});

和关键帧；

.active {
    animation-name: moveme;
    animation-duration: 1s;
    animation-timing-function: linear;
    animation-fill-mode: forwards;
}

@keyframes moveme {
    0%  {transform: translate(0,0)}
    50%  {transform: translate(-200px, 0px)}
    100%  {transform: translate(-200px,-50px);}
}

现在，当 div 返回到之前的位置时，它不会产生动画。我希望 div 使用相同的动画但向后进行动画处理。我怎样才能做到这一点？

在这里您可以看到我正在努力实现的目标 jsfiddle.net/jmrMW/43/我只是为了示例而制作了一个简单的动画，但将来它会变得更加复杂。

先谢谢你了^^

Answer 1

Javascript 可以立即添加和删除类。并且您的 CSS 仅将动画绑定(bind)到 .active 类，因此当您第二次单击时 - 您会丢失您的类 - 您会丢失轻微的动画。

现在，您可以复制我之前提到的所有内容，但是来吧!程序员从不重复，他们只是利用。发现 CSS3 动画的所有威力不是一个好主意吗？

所以，我想建议另一种方法:设置animation-direction:alternate和animation-play-state:paused。然后定义用于移动的 CSS 类，无论哪种方式:

.moving {
  animation-play-state: running;
}

然后，在单击给定元素后将其应用到给定元素仅 1 秒:

var $moveable = $( '.moveable' ).eq( 0 );

$moveable.click(function() {
    $moveable.addClass( 'moving' );
    setTimeout(function() {
         $moveable.removeClass( 'moving' );
    }, 1000);
});

See fiddle.

更新

这个解决方案有一个主要缺点 - 在 JS 和 CSS 中使用计时器，这显然不匹配。动画现在是无限的，所以每次它都会比应该的更进一步。但是我们可以增加animation-iteration-count来禁止动画进入下一个周期。希望这仍然很有趣!

See fiddle.