时间戳

首页 > 解决方案 > 在加载时向文本添加过渡

css - 在加载时向文本添加过渡

问题描述

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

标签： cssanimationtransition

解决方案

如果您可以使用 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>

推荐阅读