在加载时向文本添加过渡[关闭]答案

【问题标题】：Adding Transition to text on load [closed]在加载时向文本添加过渡[关闭]
【发布时间】：2020-08-06 01:06:45
【问题描述】：

我正在尝试在我的网站上添加过渡到文本，以便在加载页面时，“Hello”的不透明度在第一秒从 0 变为 1，文本“Name”的不透明度从 0 变为1在下一秒。我尝试使用过渡，但它只适用于悬停而不是负载。我尝试了关键帧和动画，但这仅在指定时间起作用，并且页面加载时默认不透明度为 1。要求是这样的： 你好（在第一秒出现，带有过渡） 名称（在下一秒出现过渡） 最初两者的不透明度均为 0。请帮忙。

【问题讨论】：

欢迎来到 Stack Overflow！您尝试过的代码在哪里？你对 JavaScript 持开放态度吗？请阅读how to create a minimal reproducible example。

标签： css animation transition

【解决方案1】：

您可以使用前进动画。

.hello,
.name {
  opacity: 0;
  animation: fadeIn 1s linear forwards;
}

.name {
  animation-delay: 1s;
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

<div class="hello">Hello</div>
<div class="name">there</div>

【讨论】：

【解决方案2】：

如果您可以使用 JS，则可以等到所有内容都加载完毕后再触发动画，并且如果用户未启用 JS，您可以进行回退。

如果你只使用animation而不使用JS，动画将在你的页面加载之前开始，用户可能看不到动画。

// WAIT UNTIL THE WINDOW IS FULLY LOADED
window.addEventListener('load', (event) => {
  // GET THE BODY OBJECT
  let body = document.querySelector("body");
  // ADD THE CLASS TO THE BODY
  body.classList.add('js-loaded')
});

@keyframes opacity {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}


/* IF THE USER DOESN'T HAVE JS */

h1 {
  opacity: 1;
}

p {
  opacity: 1;
}


/* IF THE USER HAS JS */

body.js-loaded h1 {
  opacity: 0;
  animation: opacity 1s;
  animation-fill-mode: forwards;
}

body.js-loaded p {
  opacity: 0;
  animation: opacity 1s;
  animation-delay: 1s;
  animation-fill-mode: forwards;
}

<body>
  <div>
    <h1>
      This is your header.
    </h1>
    <p>
      Eleifend nec eget. Id massa quis eu vitae elit. Bibendum interdum semper. Donec libero duis.
    </p>
  </div>
</body>

【讨论】：