使用 Javascript 设置列表项的不透明度时过渡不起作用

Question

我有一个列表，单击鼠标后会逐行显示。我正在将每个列表项的不透明度从 0 更改为 1，但是我似乎无法过渡到使用它。每当我将过渡持续时间设置为 1 秒时，每个列表项都需要 1 秒才能出现，而不是从不透明度 0 平滑地淡化到不透明度 1。

这是我的 javascript:

let counter = 0;

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

这是我的 CSS:

  li {
    opacity: 0;
    transition: opacity 0.3s ease;
  }

这是我的 HTML:

 <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>

Answer 1

我相信这就是您要找的...

JavaScript:

let counter = 0;

document.addEventListener('click', () => {
  counter = counter + 1;
  document.querySelector(`#line-${counter}`).classList.add("fadeIn");
});

CSS:

li {
  opacity: 0;
}

.fadeIn {
  opacity: 1;
  transition: opacity 0.3s ease;
}

每次点击都会在 0.3 秒内淡化每个列表项。

使用 Javascript 设置列表项的不透明度时过渡不起作用

Transition not working when using Javascript to set opacity of a list item

html

javascript

css

css-transitions