如何在不使用背景位置的情况下为线性渐变设置动画？

Question

我正在尝试创建内容加载器，但背景动画出现性能问题。当屏幕上只有几个元素时，它会很流畅，但在将存根元素数量增加到 20-30 的同时会大幅降低 fps。现在我知道动画背景位置属性是一个坏主意，最好为此使用变换。但我该怎么做呢？我想保持无缝动画。渐变应该相对于屏幕，而不是容器。

这是一些代码：

const cardsRoot = document.getElementById('cards')
const addButton = document.getElementById('add')
const card = document.getElementsByClassName('card')[0]
let cardsCount = 1

addButton.addEventListener('click', () => {
  cardsRoot.innerHTML = ''
  cardsCount++
  for (let i = 0; i < cardsCount; i++) {
    let cardClone = card.cloneNode(true)
    cardsRoot.appendChild(cardClone)
  }
})

body {
  padding: 40px;
}

.card {
  display: flex;
  margin-top: 20px;
}

.stub {
  width: 300px;
  height: 12px;
  margin: 8px;
  border-radius: 8px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.1) 10%, rgba(0, 0, 0, 0.04) 20%) fixed;
  animation: stub 1.3s linear infinite;
  margin-bottom: 8px;
}

.circle {
  width: 40px;
  height: 40px;
  margin-right: 12px;
  border-radius: 20px;
}

@keyframes stub {
  0% { background-position: 0vw; }
  100% { background-position: 100vw; }
}

<button id="add">
  ADD CARD
</button>

<div id="cards">
  <div class="card">
    <div>
      <div class="stub circle"></div>
    </div>
    <div>
      <div class="stub"></div>
      <div class="stub"></div>
      <div class="stub"></div>
    </div> 
  </div>
</div>

和演示：https : //jsfiddle.net/3da4uzm2/57/

Answer 1

您可以使用应用翻译的伪元素替换动画。诀窍是考虑要替换的固定元素background-attachment:fixed，然后将元素设置为屏幕的两倍大，并将其从左向右平移。

const cardsRoot = document.getElementById('cards')
const addButton = document.getElementById('add')
const card = document.getElementsByClassName('card')[0]
let cardsCount = 1

addButton.addEventListener('click', () => {
  cardsRoot.innerHTML = ''
  cardsCount++
  for (let i = 0; i < cardsCount; i++) {
    let cardClone = card.cloneNode(true)
    cardsRoot.appendChild(cardClone)
  }
})

body {
  padding: 40px;
}

.card {
  display: inline-flex;
  margin-top: 20px;
}

.stub {
  width: 150px;
  height: 12px;
  margin: 8px;
  border-radius: 8px;
  margin-bottom: 8px;
  position:relative;
  z-index:0;
  /*overflow:hidden; this is no more working, using mask instead */
  -webkit-mask:linear-gradient(#fff 0 0);
  /* OR clip-path:inset(0) */
}
.stub:before {
  content:"";
  position:fixed;
  z-index:-1;
  top:0;
  right:0;
  width:200vw;
  bottom:0;
  background: 
    linear-gradient(rgba(0, 0, 0, 0.04),rgba(0, 0, 0, 0.04)) left/50% 100%,
    linear-gradient(to right, rgba(0, 0, 0, 0.04), rgba(0, 0, 0, 0.1) 10%, rgba(0, 0, 0, 0.04) 20%) right/50% 100%;
  background-repeat:no-repeat;
  animation: stub 1.3s linear infinite;
  pointer-events:none;
}

.circle {
  width: 40px;
  height: 40px;
  margin-right: 12px;
  border-radius: 20px;
}

@keyframes stub {
  0% { transform:translate(0); }
  100% { transform:translate(50%); }
}

<button id="add">
  ADD CARD
</button>

<div id="cards">
  <div class="card">
    <div>
      <div class="stub circle"></div>
    </div>
    <div>
      <div class="stub"></div>
      <div class="stub"></div>
      <div class="stub"></div>
    </div> 
  </div>
  <div class="card">
    <div>
      <div class="stub circle"></div>
    </div>
    <div>
      <div class="stub"></div>
      <div class="stub"></div>
      <div class="stub"></div>
    </div> 
  </div>
</div>

为了更好地理解这里发生的情况，我们提供了一个简化版本，其中只有一个元素，我还更改了渐变颜色。

body:before {
  content:"";
  position:fixed; /*relative to the screen*/
  z-index:-1;
  top:0;
  right:0;
  width:200vw; /*2x100vw*/
  bottom:0;
  background: 
    /*will cover the left area while sliding*/
    linear-gradient(red,red) left/50% 100%, /*the red should be green*/
    /*the main gradient*/
    linear-gradient(to right, green, blue 10%, green 20%) right/50% 100%;
  background-repeat:no-repeat;
  animation: stub 3s linear infinite;
}
@keyframes stub {
  0% { transform:translate(0); }
  100% { transform:translate(50%); } /*50% will be 200vw/2 = 100vw*/
}

与理解背景值背后的技巧相关：在线性渐变上使用带有背景位置的百分比值