使用Javascript设置列表项的不透明度时，转换不起作用

我有一个列表，鼠标点击后逐行显示。我正在将每个列表项的不透明度从0更改为1，但是我似乎无法使用它进行转换。每当我将转换持续时间设置为1s时，每个列表项都需要1s才能显示，而不是从不透明度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>

第1行
第2行
第3行

我相信这就是你想要的

JavaScript:

let计数器=0；
document.addEventListener（'click'，（）=>{
计数器=计数器+1；
document.querySelector（`line-${counter}`）.classList.add（“fadeIn”）；
});

CSS:

li{
不透明度：0；
}
法丹先生{
不透明度：1；
过渡：不透明度0.3s；
}

每单击一次，每个列表项中的该项都会在0.3秒内消失