使用没有关键帧的纯 javascript、HTML 和 CSS 加载一个又一个动画答案

【问题标题】：Load animation after another using pure javascript, HTML, and CSS without keyframes使用没有关键帧的纯 javascript、HTML 和 CSS 加载一个又一个动画
【发布时间】：2020-10-13 05:50:33
【问题描述】：

我是 javascript 新手，我已经完成了一张图片淡入，但第二张图片不会淡入下一个。请参阅 HTML 和 Javascript。使用纯 HTML、CSS 和 JS，无需动画关键帧。没有要使用的库或框架。

对于 HTML：

    <div id="female" style="opacity: 0;"> 
        <img id="fem" src="./images/female.png" onload="female()">
    </div> 

    <div id="headline1" style="opacity: 0;">
        <img id="t1" src="./images/headline1.png" onload="headline1()">
    </div>
</div>

对于 JS 代码：

//女性动画

function female () {
var opacity = 0; 
var intervalID = 0; 
window.onload = fadeIn; 

function fadeIn() { 
    setInterval(show, 150); 
} 

function show() { 
    var body = document.getElementById("female"); 
    opacity = Number(window.getComputedStyle(body) 
                    .getPropertyValue("opacity")); 
    if (opacity < 1) { 
        opacity = opacity + 0.1; 
        body.style.opacity = opacity 
    } else { 
        clearInterval(intervalID); 
    } 
}}

//标题 1 动画

function headline1 () {
var opacity = 0; 
var intervalID = 0; 
window.onload = fadeIn; 

function fadeIn() { 
    setInterval(show, 150); 
} 

function show() { 
    var body = document.getElementById("headline1"); 
    opacity = Number(window.getComputedStyle(body) 
                    .getPropertyValue("opacity")); 
    if (opacity < 1) { 
        opacity = opacity + 0.1; 
        body.style.opacity = opacity 
    } else { 
        clearInterval(intervalID); 
    } 
}}

【问题讨论】：

标签： javascript html css animation effects

【解决方案1】：

female() 和 headline1() 两个函数都将它们自己的函数分配给 window.onload。这将导致 2 个函数相互影响。

您可以使用window.addEventListener 代替window.onload 来解决此问题。

考虑到您的 female() 和 headline1() 函数非常相似，最好使用带有参数的单个函数来指定要设置动画的图像的 ID。

function animateImage(id, opacity) {
  var intervalID = 0;
  window.addEventListener('load', fadeIn);

  function fadeIn() { 
    setInterval(show, 150);
  }

  function show() { 
    var body = document.getElementById(id); 
    opacity = Number(window.getComputedStyle(body) 
                    .getPropertyValue("opacity")); 
    if (opacity < 1) { 
        opacity = opacity + 0.1; 
        body.style.opacity = opacity 
    } else { 
        clearInterval(intervalID); 
    } 
  }
}

【讨论】：