如何在使用 CSS background-clip 属性时进行转换

Question

所以我有一个渐变段落，我正在使用背景剪辑：文本，但是，我希望它在出现时淡入。当我尝试在不透明度上设置过渡时，它不会像预期的那样淡入，而是立即出现。我希望不透明度从 0 过渡到 1。

let counter = 0;

document.addEventListener('click', () => {
  counter = counter + 1;
  document.querySelector(`#line-${counter}`).style.opacity = 1;
});

.text-container {
  color: #5ca17c;
  transition: 1s;
  background: -webkit-linear-gradient(#f0ff1f, #0eff86);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text {
  opacity: 0
 }

<div class="text-container">
  <ul>
    <li class="text" id="line-1">line 1</li>
    <li class="text" id="line-2">line 2</li>
    <li class="text" id="line-3">line 3</li>
  </ul>
</div>

当我删除 background-clip 属性时，一切正常。我将如何使用background-clip: text 进行这项工作？我需要渐变跨越整个列表而不是逐行。

Answer 1

当你给 .text 一个转换时它会起作用

代码如下：

let counter = 0;

document.addEventListener('click', () => {
  counter = counter + 1;
  document.querySelector(`#line-${counter}`).style.opacity = 1;
});

.text-container {
  color: #5ca17c;
  background: -webkit-linear-gradient(#f0ff1f, #0eff86);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
.text {
  opacity: 0;
  transition: all 1s;
 }

<div class="text-container">
  <ul>
    <li class="text" id="line-1">line 1</li>
    <li class="text" id="line-2">line 2</li>
    <li class="text" id="line-3">line 3</li>
  </ul>
</div>