我不是专家开发人员。我正在寻求一些帮助。
我试图使用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/ 我只是为了示例而制作了一个简单的动画,但将来它会变得更加复杂。
先谢谢你了^^
最佳答案
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);
});
更新
这个解决方案有一个主要缺点 - 在 JS 和 CSS 中使用计时器,这显然不匹配。动画现在是无限的,所以每次它都会比应该的更进一步。但是我们可以增加animation-iteration-count
来禁止动画进入下一个周期。希望这仍然很有趣!
关于javascript - 来回动画 div,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41871730/