javascript - 为与 CSS3 动画完成相关的功能添加回退

Question

我正在使用 animate css 提供的 CSS3 动画图书馆。加载屏幕等地方会淡出加载动画并等待此动画完成以执行其他操作。所以:

var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';

  $('#loading')
    .addClass('fadeOut')
    .one(animationEnd, function() {
      $(this).css('display', 'none');
    })

那么如果浏览器不支持fadeOut类相关的CSS3动画，会不会在动画结束时不执行函数呢？为了触发此功能，这里可能有什么回退。

Answer 1

如果浏览器不支持 CSS 动画，是否会触发动画结束事件？

通常如果浏览器不支持 CSS3 动画，那么 animationEnd 事件也不会被触发，因此动画完成时执行的回调函数根本不会被调用。

执行回调函数的解决方案是什么？

确保即使在不支持 CSS3 动画的浏览器上也能执行回调函数的一种方法是测试动画支持，并且 (a) 如果支持，则在动画完成后执行回调函数，或者 (b ) 如果不支持动画则立即执行回调函数。

在下面的片段中，我使用了 MDN 提供的代码测试动画支持。在支持动画的浏览器中，下面的代码片段会产生抖动效果，并在结束时将背景颜色更改为红色，而在不支持动画的浏览器中，它会立即将背景颜色更改为红色。

已在 IE9(不支持 CSS3 动画)、IE10、IE11、Edge、Mozilla 和 Chrome 中进行测试。在 Opera 中，代码在 Fiddle 或 CodePen 中单独测试时有效，但在此处的代码段中动画后颜色不会改变。我认为这一定与 Stack Snippet 有关，而不是代码本身。

/* Code from MDN */

var animation = false,
  animationstring = 'animation',
  keyframeprefix = '',
  domPrefixes = 'Webkit Moz O ms Khtml'.split(' '),
  pfx = '',
  elm = document.createElement('div');

if (elm.style.animationName !== undefined) {
  animation = true;
}

if (animation === false) {
  for (var i = 0; i < domPrefixes.length; i++) {
    if (elm.style[domPrefixes[i] + 'AnimationName'] !== undefined) {
      pfx = domPrefixes[i];
      animationstring = pfx + 'Animation';
      keyframeprefix = '-' + pfx.toLowerCase() + '-';
      animation = true;
      break;
    }
  }
}

/* End of Code from MDN */

if (animation) { // check if animation is supported
  var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
  $('.animated-element').one(animationEnd, function() { // if supported attach animationEnd handler
    callback();
  })
} else { // if animation is not supported execute callback immediately
  callback();
}

function callback() {
  console.log('Hello World!');
  $('.animated-element').css('background-color', 'red');
}

.animated-element {
  display: inline-block;
  width: 200px;
  height: 200px;
  border: 1px solid;
  animation: shake 1s 2s linear forwards;
}
@keyframes shake {
  0% {
    transform: translateX(10px);
  }
  25% {
    transform: translateX(-10px);
  }
  50% {
    transform: translateX(10px);
  }
  75% {
    transform: translateX(-10px);
  }
  100% {
    transform: translateX(0px);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='animated-element'>Hello!</div>

是否有可用于执行这些测试的库？

您可以使用像 Modernizr 这样的库来测试动画支持，然后根据它决定进一步的操作过程。