如何在CSS3动画结束后. 手动倒放动画?

Question

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

Answer 1

用transition；

transition: width 0.5s,height 0.5s;

css

.icon {
  width: 50px;
  height: 50px;
  background: blue;
  overflow: hidden;
  line-height: 50px;
  font-size: 20px;
  text-align: center;
  border-radius: 50%;
  transition: width 0.5s,height 0.5s;
}
.act
{
  width: 300px;
  height: 300px;
}

js

let flag = true;
$('.icon').click(function() {
    if(flag) {
      $('.icon').addClass('act');
  } else {
        $('.icon').removeClass('act');
  }
    flag = !flag;
})

Answer 2

如果是简单的动画效果，可以用transition，设定需要动画的属性，然后用一个class来设定动画的终止状态，然后点击事件来增加或移除class来实现动画

例：

HTML

<div id="target">target</div>

CSS

div#target { height:50px; width: 50px; transition: height 1s ease-in, width 1s ease-in;}
.big { height: 100px; width: 100px;}

JS

document.getElementById('target').addEventListener('click', function(){this.classList.toogle('big');}, false);

如果你要实现复杂CSS动画，那控制起来就有点麻烦了，你要监听Animation事件来获知动画当前的状态，用animation-play-state来控制播放。因为没有提供动画控制的API，所以还不如用JS动画来得方便。