大佬教程收集整理的这篇文章主要介绍了jquery – 在动画暂停时使用j Query更改动画延迟在Safari上不起作用,但它在其他任何地方都有效,大佬教程大佬觉得挺不错的,现在分享给大家,也给大家做个参考。
这适用于所有浏览器,但不适用于Safari(版本11.1.1(13605.2.8)).
$(document).ready(function() { fluider([ { SELEctor: '.manualAnim',start: 100,end: 500 },{ SELEctor: '.manualAnim2',start: 500,end: 1000 },{ SELEctor: '.manualAnim3',start: 0,end: 1500 } ]) }) function fluider(o) { for(var i = 0; i < o.length; i++) { $(o[i].SELEctor).css('animation-play-state','paused'); $(o[i].SELEctor).css('animation-duration','100s'); } $(window).scroll(function() { var h = $(window).scrollTop(); for(var i = 0; i < o.length; i++) { $(o[i].SELEctor).css('animation-delay',-clamp(0,100,((h-o[i].start)/o[i].end * 100)) + 's'); } }); } function clamp(from,to,val) { if(val >= from) { if(val <= to) { return val; } else { return to; } } else { return from; } }
body { height: 1000vh; } .manualAnim { position: fixed; display: block; width: 100px; height: 100px; BACkground-color: red; animation: 100s anim paused both; animation-delay: 0s; } .manualAnim2 { position: fixed; display: block; left: 120px; width: 100px; height: 100px; BACkground-color: red; animation: 100s anim paused both; animation-delay: 0s; } .manualAnim3 { position: fixed; display: block; left: 240px; width: 100px; height: 100px; BACkground-color: red; animation: 100s anim paused both; animation-delay: 0s; } @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>
我现在用谷歌搜索几个小时,但我不知道可能是什么问题.
任何的想法?
看起来潜在的问题是,当为暂停的动画更改动画属性时,元素不会重新绘制,正如问题所述.这个解决方案通过每帧重新添加必要的动画相关CSS(具有正确的延迟)来解决这个问题.这通常会导致闪烁(因为Safari会在删除动画时尝试恢复到非动画样式),因此每次修改动画时此解决方案都会手动应用当前动画样式.
$(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>
以上是大佬教程为你收集整理的jquery – 在动画暂停时使用j Query更改动画延迟在Safari上不起作用,但它在其他任何地方都有效全部内容,希望文章能够帮你解决jquery – 在动画暂停时使用j Query更改动画延迟在Safari上不起作用,但它在其他任何地方都有效所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错,欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。