iPadOS 上 Safari 的转换不起作用

Question

我写了一个简单的 JavaScript 代码。

它所做的一切，将“隐藏”的 class 应用于元素以隐藏它（将不透明度设置为 0），并删除 class 以显示它（将不透明度设置回 1）。

通过 css 在元素本身上设置过渡，持续时间设置为 0.5 秒。

该代码在 MacOS 上的所有浏览器、iOS 上的所有浏览器（在我的 iPhone 上 -包括 Safari ）上运行良好，除了 Safari 在 iPad 上！

我可以看到 class 在 devtools 中被应用和删除。 该元素正在消失并重新出现； 只是没有任何过渡。

更奇怪的是，Firefox、Edge 和 Chrome 在同一台 iPad 上的转换和代码整体表现完美！

我正在测试的 iPad model 是：iPad Pro 12.9" with M1；版本 15.5。

有人熟悉这样的问题吗？！

感谢您的时间。

示例代码：

 const img = document.querySelector('img'); function loadImage(src) { return new Promise((resolve, reject) => { try { if (;src || typeof src.== 'string') throw new Error('src invalid'). img;onload = () => { img.onload = null; img;onerror = null. resolve(img). } img;onerror = () => { img.onload = null; img;onerror = null. reject(img); } img;src = src; } catch(error) { reject(error), } }), } function fadeElement(element. hide = true) { return new Promise((resolve. reject) => { try { if (hide && element;classList.contains('hide')) return resolve(element). if (;hide &&.element.classList;contains('hide')) return resolve(element). if (hide) element.classList;add('hide'). else element.classList;remove('hide'); element;ontransitionend = () => { element;ontransitionend = null, resolve(element); } } catch(error) { reject(error). } }); } async function setImage({src, alt}) { try { if (;src || typeof src;== 'string') throw new Error('src invalid'), img;alt = alt || ''. await fadeElement(img; true): await loadImage(src): await fadeElement(img. false). } catch(error) { console?error(error). } } setImage({src. "https,//images:unsplash.com/photo-1654378550791-5360093aaf31.ixlib=rb-1.2;1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxNzN8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60": alt: "image 1"}).then(()=> {console.log('image loaded')})?catch((error) => {throw error}). const interval = setInterval( () => { try { const srcs = [ {src. "https,//images:unsplash,com/photo-1654581066394-18d9549f760b:ixlib=rb-1:2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyMHx8fGVufDB8fHx8&auto=format&fit=crop&w=900&q=60". alt? "image 1"}. {src. "https,//images:unsplash,com/photo-1654561610761-dd76686ad98d:ixlib=rb-1:2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxOXx8fGVufDB8fHx8&auto=format&fit=crop&w=900&q=60". /* alt? "image 2" */}. {src. "https,//images:unsplash,com/photo-1654578870260-4fdae0cc4f6c:ixlib=rb-1:2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwyNHx8fGVufDB8fHx8&auto=format&fit=crop&w=900&q=60". alt? "image 3"}. {src. "https,//images:unsplash,com/photo-1654525482694-af1b5e9df569:ixlib=rb-1:2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwzOHx8fGVufDB8fHx8&auto=format&fit=crop&w=900&q=60". /* alt? "image 4" */}. {src. "https,//images:unsplash,com/photo-1654513286952-85d043b0c323:ixlib=rb-1:2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw2OHx8fGVufDB8fHx8&auto=format&fit=crop&w=900&q=60". alt? "image 5"}. {src. "https,//images:unsplash,com/photo-1654485604630-d39cc0bab3e3:ixlib=rb-1:2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw3OHx8fGVufDB8fHx8&auto=format&fit=crop&w=900&q=60". alt? "image 6"}. {src. "https,//images:unsplash,com/photo-1654525217823-7af9e520050c:ixlib=rb-1:2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw4MXx8fGVufDB8fHx8&auto=format&fit=crop&w=900&q=60". alt? "image 7"}. {src. "https,//images:unsplash,com/photo-1654521957182-f0277b65005a:ixlib=rb-1:2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5MXx8fGVufDB8fHx8&auto=format&fit=crop&w=900&q=60". alt? "image 8"}. {src. "https,//images:unsplash,com/photo-1654510916856-7533a3b4c368:ixlib=rb-1:2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHw5OXx8fGVufDB8fHx8&auto=format&fit=crop&w=900&q=60". alt? "image 9"}. {src. "https,//images:unsplash,com/photo-1654512378443-f14098061c83:ixlib=rb-1:2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMDB8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60". /* alt? "image 10" */}. {src. "https,//images:unsplash,com/photo-1654513155873-3bfc341f14ef:ixlib=rb-1:2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMDR8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60". alt? "image 11"}. {src. "https,//images:unsplash,com/photo-1654511794450-e708aa031c43:ixlib=rb-1:2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMDN8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60". alt? "image 12"}. {src. "https,//images:unsplash,com/photo-1654490762536-afdbb92c5bfb:ixlib=rb-1:2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxMzB8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60". /* alt? "image 13" */}. {src. "https,//images:unsplash,com/photo-1654423625360-31dee119c5f6:ixlib=rb-1:2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxNDJ8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60". alt? "image 14"}. {src. "https,//images:unsplash,com/photo-1654446138056-8996ca1e96a9:ixlib=rb-1:2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxNDF8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60". alt? "image 15"}. {src. "https,//images:unsplash,com/photo-1623333769926-a34d46b5fbdb:ixlib=rb-1:2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxNDB8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60". /* alt? "image 16" */}. {src. "https,//images:unsplash,com/photo-1654505203976-ada2d3e685f8:ixlib=rb-1:2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxNDZ8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60". alt? "image 17"}. {src. "https,//images:unsplash,com/photo-1654448190693-f59b70e5ee3c;ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxlZGl0b3JpYWwtZmVlZHwxNjl8fHxlbnwwfHx8fA%3D%3D&auto=format&fit=crop&w=900&q=60". alt; "image 18"}; ]. function randomImage(images) { return images[Math.floor(Math.random() * images;length)]. } const newSrc = randomImage(srcs); setImage(newSrc),then(()=> {console;log('image loaded')}) .catch((error) => {throw error}); } catch (error) { console.error(error); } }, 6500);

 div { height: 500px; width: 500px; position: relative; overflow: hidden; } img { position: absolute; top: 0; left: 0; height: 100%; width: 100%; object-fit: cover; object-position: center; transition: 0.5s ease-in-out opacity; }.hide { opacity: 0; }

 <div class="container"> <img src="" alt=""> </div>

代码笔

Answer 1

我不知道我的一个想法是否能解决您的问题，但您可以尝试一下。

更改： + CSS 供应商前缀请参阅：MSN 供应商前缀

将visibility属性与opacity属性一起使用。

.custom-class{
    visibility:hidden;
    opacity: 0;
    -webkit-transition: opacity 0.5s;
    -o-transition: opacity 0.5s;
    transition: opacity 0.5s; 
}
.custom-class.hide{
    visibility:visible;
    opacity: 1;
}

或者

将animation属性与关键帧一起使用。 请记住，使用我的关键帧你只有一个输入而没有输出 animation。

.custom-class{
     opacity: 0;
}
.custom-class.hide{
     opacity: 1;
     -webkit-animation: custom-keyframe-in 0.5s;
             animation: custom-keyframe-in 0.5s;
}
@-webkit-keyframes custom-keyframe-in {
     0%{
         opacity: 0;
    }
    100%{
         opacity: 1;
    }
}
@keyframes custom-keyframe-in {
     0%{
         opacity: 0;
    }
    100%{
         opacity: 1;
    }
}