Question

目标是让元素在页面加载时“淡入”，交错节奏。

该方法是在每个元素的transition-delay上使用不同的opacity值。

结果在macOS Chrome和Safari中令人满意，但在iOS Chrome和Safari中，每个元素都会出现在视图中，立即重新消失，然后开始淡入视图，就像一个闪烁的霓虹灯。

我已经尝试了所有建议here和here，这些建议主要是尝试进行3D渲染（大多数都以-webkit-为前缀）：

backface-visibility：hidden;
perspective：1000;
tap-highlight-color：rgba（0,0,0,0）;
transform-style：preserve-3d;
transform：translate3d（0,0,0）;
transform：translateZ（0）;
将改变：转换;

演示：

https://codepen.io/jtheletter/pen/LQwjrx

<button id="button">Click to Fade</button>
<div id="content" class="content">
    <h3>Why</h3>
    <h2>iOS</h2>
    <h1>flicker?</h1>
</div>

h1, h2, h3 {
  opacity: 0;
  transition-duration: 2s;
  transition-property: opacity;
}
h3 {
  transition-delay: 1s;
}
h2 {
  transition-delay: 2s;
}
h1 {
  transition-delay: 3s;
}
.loaded h1, .loaded h2, .loaded h3 {
  opacity: 1;
}

var button = document.getElementById('button');
var content = document.getElementById('content');
button.addEventListener('click', function () {
  content.classList.toggle('loaded');
});

Answer 1

我可以使用@keyframes代替transition-delay来推迟动画，而不会在iOS上引入闪烁。

演示:( JavaScript仅适用于激活按钮，动画延迟不需要）

https://codepen.io/jtheletter/pen/OvJmLQ

<button id="button">Click to Fade</button>
<div id="content" class="content">
    <h3>Why</h3>
    <h2>iOS</h2>
    <h1>flicker?</h1>
</div>

@keyframes fade-1 {
    0% { opacity: 0; }
    20% { opacity: 0; }
    60% { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes fade-2 {
    0% { opacity: 0; }
    40% { opacity: 0; }
    80% { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes fade-3 {
    0% { opacity: 0; }
    70% { opacity: 0; }
    100% { opacity: 1; }
}
h1, h2, h3 {
    animation-duration: 3s;
}
.fade-now h3 {
    animation-name: fade-1;
}
.fade-now h2 {
    animation-name: fade-2;
}
.fade-now h1 {
    animation-name: fade-3;
}

var button = document.getElementById('button');
var content = document.getElementById('content');
button.addEventListener('click', function () {
    content.classList.remove('fade-now');
    setTimeout(function () {
        content.classList.add('fade-now');
    }, 1000);
});

iOS中不透明度闪烁/弹出的延迟转换

1 个答案: