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

这是你的JSFiddle的一个分支。几乎只是重复你已经拥有的关键帧，但反过来应用它:)

＆＃13;

$('div').on('click', function() {
  if ( $(this).hasClass("go-up") ) {
    $(this).removeClass("go-up").addClass("go-down");
  } else {
    $(this).addClass("go-up").removeClass("go-down");
  }
});

＆＃13;

div{
  background:#aaa;
  width: 200px;
  margin: 20vh auto;
  height: 200px;
}
.go-up {
  animation-name: moveup;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}
.go-down {
  animation-name: movedown;
  animation-duration: 1s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-fill-mode: forwards;
}

@keyframes moveup {
  0%  {transform: translate(0,0)}
  50%  {transform: translate(-100px, 0px)}
  100%  {transform: translate(-100px,-50px);}
}

@keyframes movedown {
  0%  {transform: translate(-100px,-50px);}
  50%  {transform: translate(-100px, 0px)}
  100%  {transform: translate(0,0)}
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div></div>

＆＃13;

http://jsfiddle.net/jmrMW/43/

Answer 2

Javascript立即添加和删除课程。而你的CSS只将动画绑定到.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.

来回动画div

2 个答案: