2022/8/10

13th鐵人賽 css

 粒粒

團隊神龍特攻隊 - it 宏的逆襲

2021-10-02 00:49:07

461 瀏覽

Q: 終於要講效能了！
A: 以Loading為範例講黑～

Animation Loading 直線版本

前幾篇有做過Loading效果的動畫，今天延續下去！同時說明操作css在改變不同屬性時會帶來不同效能的影響。

首先先來做出Loading的點點。

<style>
  .container {
    width: 600px;
    height: 300px;
    margin: 120px auto;
    display: flex;
  }
  .dot {
    width: 15px;
    height: 15px;
    background-color: gray;
    border-radius: 50%;
    margin-right: 10px;
  }
  .container .dot:nth-child(1) {
    background-color: Maroon;
    animation-delay: 0s;
  }
  .container .dot:nth-child(2) {
    background-color: FireBrick;
    animation-delay: .2s;
  }
  .container .dot:nth-child(3) {
    background-color: IndianRed;
    animation-delay: .4s;
  }
  .container .dot:nth-child(4) {
    background-color: LightCoral;
    animation-delay: .6s;
  }
</style>
<div class="container">
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
  <div class="dot"></div>
</div>

再來加上動畫效果

這裡我們會希望Loading時點點有跳動的感覺，這裏給元素在演繹動畫時使用 margin-top 做位移。

<style>
  .container .dot {
    animation: jump 1s infinite;
  }

  @keyframes jump {
    35% {
      margin-top: -25px;
    }
    0%, 60%, 100% {
      margin-top: 0;
    }
  }
</style>

但如果把 margin 改成 transform 製作位移效果，這時候只會讓元素重新繪製，不會重新計算也不會重新佈局。還記得 transform 屬性控制元素的什麼嗎？ transform 控制的是該元素的變形，所以當元素使用 transform 做位移時，只有該元素在做位移的變形，不會影響其他元素的位置；而 margin 被改變時，會影響到別的元素的位置，所以會需要花費更多時間重新計算、佈局及繪製。

各種屬性在改變時都會讓網頁重新繪製，只是改變不同的屬性在渲染時的成本都不盡相同，如果像是 margin border-width等等這種會影響別的元素的位置的屬性產生變化時，就會需要耗費比較高的成本重新計算、佈局及繪製；但如果像是 transform 這種只會影響自己本身的樣式的屬性，那麼重新渲染的成本就會比較低。