jquery – 在动画暂停时使用j Query更改动画延迟在Safari上不起作用,但它在其他任何地方都有效

看起来潜在的问题是,当为暂停的动画更改动画属性时,元素不会重新绘制,正如问题所述.这个解决方案通过每帧重新添加必要的动画相关CSS(具有正确的延迟)来解决这个问题.这通常会导致闪烁(因为Safari会在删除动画时尝试恢复到非动画样式),因此每次修改动画时此解决方案都会手动应用当前动画样式.@H_607_3@

$(document).ready(function() {
  fluider([{
      SELEctor: '.manualAnim',end: 500
    },{
      SELEctor: '.manualAnim2',end: 1000
    },{
      SELEctor: '.manualAnim3',end: 1500
    }

  ])
})

function getAnimatedProperties(animname) {
  // Get an array of all property names that
  // are modified by the animation ${animname}
  let properties = {};
  let sheets = document.styleSheets;
  let propertyRegex = /([a-z\-]+):/ig;
  for (let sheet of sheets) {
    let rules = sheet.rules || sheet.cssRules;
    for (let r of rules) {
      if (r.name === animname) {
        let rText = r.cssText;
        let match = propertyRegex.exec(rText);
        while (match) {
          properties[match[1]] = true;
          match = propertyRegex.exec(rText);
        }
      }
    }
  }
  return Object.keys(properties);
}

function fluider(o) {
  const animationName = "anim";
  const preservedProperties = getAnimatedProperties(animationName);
  $(window).scroll(function() {
    var h = $(window).scrollTop();
    for (var i = 0; i < o.length; i++) {
      let el = document.querySELEctor(o[i].SELEctor);
      let pct = 100 * (parseInt(h) - o[i].start) / o[i].end;
      let delay = -Math.max(Math.min(pct,100),0) + 's';
      let s = window.getComputedStyle(el);
      // without setTing these properties and overwriTing .style,// the animation will flicker
      let preservedStyles = preservedProperties.map(p => `${p}: ${s[p]};`).join("");
      el.style = `${preservedStyles} animation-delay: ${delay}; animation-duration: 100s; animation-play-state: paused;`;
      // without scheduling this *using setTimeout*,// the animation will not rerender
      window.setTimeout(() => {
        el.style.animationName = animationName;
      },0);
    }
  });
}

body {
  height: 1000vh;
}

.manualAnim {
  position: fixed;
  display: block;
  width: 100px;
  height: 100px;
  BACkground-color: red;
}

.manualAnim2 {
  position: fixed;
  display: block;
  left: 120px;
  width: 100px;
  height: 100px;
  BACkground-color: red;
}

.manualAnim3 {
  position: fixed;
  display: block;
  left: 240px;
  width: 100px;
  height: 100px;
  BACkground-color: red;
}

@keyframes anim {
  0% {
    BACkground-color: red;
    transform: scale(1);
  }
  30% {
    BACkground-color: green;
    transform: scale(1.5);
  }
  60% {
    BACkground-color: blue;
    transform: scale(0.5);
  }
  100% {
    BACkground-color: yellow;
    transform: scale(1);
  }
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="manualAnim"></div>
<div class="manualAnim2"></div>
<div class="manualAnim3"></div>