Javascript 如何避免可见性的瞬间转换

我尝试了很多方法来达到想要的效果，例如删除一个类，然后添加一个新的类，也尝试切换一个类，但对我来说没有任何效果。也许可以用不同的方式来做，但我不知道怎么做。所以问题是：如何在一段规定的时间内使从可见到隐藏以及从可见到隐藏的转换更加平滑

let trigger=document.querySelector（“重置”）；
let show=document.querySelector（#show”）；
addEventListener（“单击”，函数（）{
trigger.classList.replace（“show”、“hidden”）；
});
show.addEventListener（“单击”，函数（）{
trigger.classList.replace（“隐藏”、“显示”）；
});
.grid{
盒影：08pxRGBA（255213,79,0.50）；
字体大小：50px；
边界半径：5%；
垫面：3%；
垫底：3%；
文本对齐：居中；
宽度：30%；
背景色：#ffd54f；
浮动：左；
利润率：1.66%；
过渡：均为0.5s；
}
.grid:悬停{
盒影：0 15像素rgba（255、213、79、0.50）；
背景色：#FFC107；
}
.grid：活动{
边框宽度：3倍；
背景色：#FFA000；
}
.隐藏{
过渡：均为0.5s；
可见性：隐藏；
}
.表演{
过渡：均为0.5s；
能见度：可见；
}
隐藏
再次显示
由于
隐藏
和
可见
不是数值或可计算的值，因此无法设置动画，您必须满足
不透明度
属性的
0
和
1
：


let trigger=document.querySelector（“重置”）；
let show=document.querySelector（#show”）；
addEventListener（“单击”，函数（）{
trigger.classList.replace（“show”、“hidden”）；
});
show.addEventListener（“单击”，函数（）{
trigger.classList.replace（“隐藏”、“显示”）；
});
.grid{
盒影：08pxRGBA（255213,79,0.50）；
字体大小：50px；
边界半径：5%；
垫面：3%；
垫底：3%；
文本对齐：居中；
宽度：30%；
背景色：#ffd54f；
浮动：左；
利润率：1.66%；
过渡：均为0.5s；
}
.grid:悬停{
盒影：0 15像素rgba（255、213、79、0.50）；
背景色：#FFC107；
}
.grid：活动{
边框宽度：3倍；
背景色：#FFA000；
}
.隐藏{
过渡：均为0.5s；
/*可见性：隐藏*/
不透明度：0；
}
.表演{
过渡：均为0.5s；
/*能见度：可见*/
不透明度：1；
}
隐藏
再次显示