JavaScript的setTimeout仿讀取時間與簡易轉場動畫的預載區塊動畫

透過 JavaScript 的 setTimeout() 來仿讀取時間，當設定的時間到之後增加有 transform 的 class 呈現轉場。

程式碼如下：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="css/main.css" />
  </head>
  <body>
    <div class="splash">
      <!-- <img class="splash__svg" src="svg-loaders/puff.svg" /> -->
      <svg
        width="44"
        height="44"
        viewBox="0 0 44 44"
        stroke="#fff"
      >
        <g fill="none" fill-rule="evenodd" stroke-width="2">
          <circle cx="22" cy="22" r="1">
            <animate
              attributeName="r"
              begin="0s"
              dur="1.8s"
              values="1; 20"
              calcMode="spline"
              keyTimes="0; 1"
              keySplines="0.165, 0.84, 0.44, 1"
              repeatCount="indefinite"
            />
            <animate
              attributeName="stroke-opacity"
              begin="0s"
              dur="1.8s"
              values="1; 0"
              calcMode="spline"
              keyTimes="0; 1"
              keySplines="0.3, 0.61, 0.355, 1"
              repeatCount="indefinite"
            />
          </circle>
          <circle cx="22" cy="22" r="1">
            <animate
              attributeName="r"
              begin="-0.9s"
              dur="1.8s"
              values="1; 20"
              calcMode="spline"
              keyTimes="0; 1"
              keySplines="0.165, 0.84, 0.44, 1"
              repeatCount="indefinite"
            />
            <animate
              attributeName="stroke-opacity"
              begin="-0.9s"
              dur="1.8s"
              values="1; 0"
              calcMode="spline"
              keyTimes="0; 1"
              keySplines="0.3, 0.61, 0.355, 1"
              repeatCount="indefinite"
            />
          </circle>
        </g>
      </svg>
    </div>
    <section>
      <h1>這是要呈現的內容</h1>
    </section>

    <script src="scripts.js"></script>
  </body>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<body>

<svg

width="44"

height="44"

viewBox="0 0 44 44"

stroke="#fff"

<animate

attributeName="r"

begin="0s"

dur="1.8s"

values="1; 20"

calcMode="spline"

keyTimes="0; 1"

keySplines="0.165, 0.84, 0.44, 1"

repeatCount="indefinite"

<animate

attributeName="stroke-opacity"

begin="0s"

dur="1.8s"

values="1; 0"

calcMode="spline"

keyTimes="0; 1"

keySplines="0.3, 0.61, 0.355, 1"

repeatCount="indefinite"

</circle>

<animate

attributeName="r"

begin="-0.9s"

dur="1.8s"

values="1; 20"

calcMode="spline"

keyTimes="0; 1"

keySplines="0.165, 0.84, 0.44, 1"

repeatCount="indefinite"

<animate

attributeName="stroke-opacity"

begin="-0.9s"

dur="1.8s"

values="1; 0"

calcMode="spline"

keyTimes="0; 1"

keySplines="0.3, 0.61, 0.355, 1"

repeatCount="indefinite"

</circle>

</g>

</svg>

</div>

<h1>這是要呈現的內容</h1>

</section>

</body>

</html>

:root {
  --bg-color: #00a6e2;
  --text-color: white;
}

body {
  height: 100vh;
  margin: 0;
  padding: 0;
}

.splash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: grid;
  place-content: center;
  background: var(--bg-color);
  transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);
  z-index: 999;
  /** 當增加 transform 屬性時，執行 transition 轉場效果 */
  .splash__svg {
    width: 60px;
  }
}


.remove-splash {
  transform: translateY(-100%);
}

.remove-intro {
  transform: translateY(0);
  opacity: 1;
}

section {
  width: 80vw;
  height: calc(100vh - 6em);
  display: grid;
  padding: 3em;
  margin: 0 auto;
  text-align: center;
  place-content: center;

  h1 {
    font-size: 2.5rem;
    font-family: sans-serif;
    opacity: 0;
    transform: translateY(-30px);
    transition: transform 1s, opacity 1s;
    transition-delay: 0.3s;
  }
}

:root {

--bg-color: #00a6e2;

--text-color: white;

}

body {

height: 100vh;

margin: 0;

padding: 0;

}

.splash {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100vh;

display: grid;

place-content: center;

background: var(--bg-color);

transition: transform 1s cubic-bezier(0.165, 0.84, 0.44, 1);

z-index: 999;

/** 當增加 transform 屬性時，執行 transition 轉場效果 */

.splash__svg {

width: 60px;

}

.remove-splash {

transform: translateY(-100%);

}

.remove-intro {

transform: translateY(0);

opacity: 1;

}

section {

width: 80vw;

height: calc(100vh - 6em);

display: grid;

padding: 3em;

margin: 0 auto;

text-align: center;

place-content: center;

h1 {

font-size: 2.5rem;

font-family: sans-serif;

opacity: 0;

transform: translateY(-30px);

transition: transform 1s, opacity 1s;

transition-delay: 0.3s;

}

const splash = document.querySelector(".splash");
const headline = document.querySelector("h1");

const duration = 2000;
const removeSplash = () => {
  splash.classList.add("remove-splash");
  headline.classList.add("remove-intro");
};
setTimeout(removeSplash, duration);

const splash = document.querySelector(".splash");

const headline = document.querySelector("h1");

const duration = 2000;

const removeSplash = () => {

splash.classList.add("remove-splash");

headline.classList.add("remove-intro");

};

setTimeout(removeSplash, duration);

關鍵程式碼：

JavaScript 的 setTimeout 觸發後，在二個綁定的元素以 .classList.add() 的方法，各自在對應的元素加上 class ( remove-splash & remove-intro)，特別注意所使用 class 名稱參數，前方不用在加上 .，只需要名稱的字串。
.splash 區塊在 setTimeout 方法觸發後所加上的 .remove-splash class 名稱，主要是在同一個元素疊加上了 transform 的樣式屬性來進行垂直位移，配合上 transition 屬性就會產生出移動的動畫效果，所執行的 cubic-bezier() 影響動畫的播放速度。
h1 元素在 setTimeout 方法觸發後，因原本的元素就有指定了 opacity: 0; (全透) 與 transform: translateY(-30px) (垂直位移)，當疊加上 .remove-intro 樣式加上了 transform: translateY(0) 與 opacity: 1 (不透) ，因此在指定 transition: transform 1s, opacity 1s; 的影響下，就會讓二個原先預設的 CSS 屬性產生由上至下位移與淡出的轉場效果。

CSS transition 轉場效果，當 background-color 與 color 屬性受疊加操作時，就會產生轉場效果。

See the Pen CSS transition 的 hover 受 background-color 與 color 屬性改變而以 transition 設定的轉場效果 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

完整範例如下：

See the Pen JavaScript的setTimeout仿讀取時間與簡易轉場動畫的預載區塊動畫 by Jimmy_Wu (@Jimmy_Wu) on CodePen.

其他資源：
SVG-Loaders：GitHub、DemoPage

標籤雲