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

像这样？ 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 中运行。