我有一个网页，当用户点击一个按钮时，它从数据集中随机选择一个俳句并显示出来。
我希望当用户点击按钮时，文本会先淡出，然后变成新的俳句，然后再淡入，但我不能让这个工作。
我试过用下面的方法来做这个。文本有下面的CSS类：

.text-fade{
    transition: opacity 1s;
}

我可以让文本淡化之前改变俳句这样：

document.getElementById('haikuButton').addEventListener('click', () => {            
    document.getElementById('haikuText').style.opacity = 0;
    setTimeout(getRandomHaiku, "1000"); //this function picks the random haiku from the set and asigns it after the text has faded
});

但我不知道如何让它淡入，如果我这样做：

document.getElementById('haikuButton').addEventListener('click', () => {            
    document.getElementById('haikuText').style.opacity = 0;      
    setTimeout(getRandomHaiku, "1000"); 
    document.getElementById('haikuText').style.opacity = 1;      
});

什么都没有发生，我假设，因为这一切都发生瞬间，不透明度设置为0，文本选择，然后不透明度再次设置为1，函数结束，所以没有办法看到褪色。