新手上路,如何在CSS3动画结束后. 手动倒放动画?跪求！

Question

需要实现效果:有两个状态A,B,点击后A->B,再次点击B->A;例子:点击元素有元素变大,再次点击元素变小,但是我写的只有在第一次点击的时候有效果JSFiddle:https://jsfiddle.net/sylvaner...

Answer 1

用transition；transition:width0.5s,height0.5s;css.icon{width:50px;height:50px;background:blue;overflow:hidden;line-height:50px;font-size:20px;text-align:center;border-radius:50%;transition:width0.5s,height0.5s;}.act{width:300px;height:300px;}jsletflag=true;$('.icon').click(function(){if(flag){$('.icon').addClass('act');}else{$('.icon').removeClass('act');}flag=!flag;})

Answer 2

如果是简单的动画效果，可以用transition，设定需要动画的属性，然后用一个class来设定动画的终止状态，然后点击事件来增加或移除class来实现动画例：HTMLtargetCSSdiv#target{height:50px;width:50px;transition:height1sease-in,width1sease-in;}.big{height:100px;width:100px;}JSdocument.getElementById('target').addEventListener('click',function(){this.classList.toogle('big');},false);如果你要实现复杂CSS动画，那控制起来就有点麻烦了，你要监听Animation事件来获知动画当前的状态，用animation-play-state来控制播放。因为没有提供动画控制的API，所以还不如用JS动画来得方便。