来回动画div

时间:2017-01-26 10:45:04

标签: javascript css animation

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

我试图使用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/ 我只是为了这个例子制作了一个简单的动画,但将来它会变得更加复杂。

提前谢谢^^

2 个答案:

答案 0 :(得分:0)

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



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

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

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

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

答案 1 :(得分:0)

Javascript立即添加和删除课程。而你的CSS只将动画绑定到.active类,所以当你第二次点击时 - 你松开了你的课程 - 你就会失去轻微的动画。

现在,您可以像我之前提到的那样复制所有内容,但请加油!程序员从不复制,他们使用。发现CSS3动画的所有功能并不是一个好主意吗?

所以,我想建议另一种方法:设置animation-direction: alternateanimation-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.