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

Adding fallback for functionality related to CSS3 animation completion

本文关键字：功能 添加 回退 CSS3 动画 为与      更新时间：2023-09-26

我使用的是animate css库提供的CSS3动画。有些地方，比如加载屏幕，会淡出加载动画并等待此动画完成，以便执行其他操作。因此：

var animationEnd = 'webkitAnimationEnd mozAnimationEnd MSAnimationEnd oanimationend animationend';
  $('#loading')
    .addClass('fadeOut')
    .one(animationEnd, function() {
      $(this).css('display', 'none');
    })

所以，如果浏览器不支持与fadeOut类相关的CSS3动画，它会不会在动画端执行该功能？为了启动此功能，这里可能有什么后备措施。

如果浏览器不支持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这样的库来测试动画支持，然后根据它来决定进一步的操作过程。

相关文章：