我不是专家开发者。我正在寻求一些帮助。
我试图使用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/ 我只是为了这个例子制作了一个简单的动画,但将来它会变得更加复杂。
提前谢谢^^
答案 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;
答案 1 :(得分:0)
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);
});
<强>更新强>
这个解决方案有一个主要的缺点 - 在JS和CSS中使用计时器显然不会匹配。动画现在是无限的,所以每次动画都比应该的更进一步。但我们可以增加animation-iteration-count
来禁用动画进入下一个循环。希望这仍然很有趣!