jquery - 如何在这个 CSS 动画的末尾添加淡出？

Question

动画：http ://codepen.io/leongaban/pen/wJAip

如果单击Animate Down按钮，jQuery 会将.animateDown类添加到微调器。然后微调器将动画降至 0，但随后再次弹回全尺寸。

如何在 CSS 的末尾添加一个新的关键帧以在微调器缩小后隐藏它？

或者

在 jQuery 中，当微调器缩小到 0 时，我会监听然后 hide() 吗？

CSS：

.animateDown {
    -webkit-animation: animateDown .3s ease-in-out;
    animation: animateDown .3s ease-in-out;
}

@-webkit-keyframes animateDown { 
    0%  {
        -webkit-transform: scale(1);
        transform: scale(1);
    }
    100% { 
       -webkit-transform: scale(0);
       transform: scale(0);
    }
}

jQuery：

$('#animate-down').unbind('click').bind('click', function() {
    $('#spinner').removeClass('animateUp');
    $('#spinner').addClass('animateDown');
});

Answer 1

另外对于纯 CSS 解决方案，请查看动画填充模式

在你的情况下：animation-fill-mode: forwards;

唯一的问题可能是跨浏览器的兼容性。

Answer 2

如果我正确理解了问题，则需要将回调附加到 css 动画。像这样的东西。

$(".animateDown").bind('oanimationend animationend webkitAnimationEnd', function() { 
   alert("fin") 
});

如这里所见

编辑：也有一个纯 JS 版本，但我喜欢我的 jQuery :)。

Answer 3

像这样？http://codepen.io/anon/pen/sypjf

你可以使用'forwards'，这样CSS动画就不会重复：

.animateUp {
  -webkit-animation: animateUp .6s ease-in-out forwards;
  animation: animateUp .6s ease-in-out forwards;
}
.animateDown {
  -webkit-animation: animateDown .3s ease-in-out forwards;
  animation: animateDown .3s ease-in-out forwards;
}

并将 opacity: 0 添加到关键帧，使元素变得不可见（与 $.hide() 不太一样：

@-webkit-keyframes animateDown { 
0%  {
  -webkit-transform: scale(1);
  transform: scale(1);

  }
100% { 
  -webkit-transform: scale(0);
  transform: scale(0);
  opacity: 0;
  }
}

另外不要忘记添加 -moz 前缀，您的演示目前在 Firefox 中不起作用。