Javascript 我不知道的事'；我不明白你在等什么

在继续使用其他代码之前，我正在使用wait完成css转换。在[this fiddle][1]中，fadeIn和fadeOut异步函数包含一个等待，用于在转换结束时解析

函数transTo（el，类名）{
返回新承诺（解决=>{
el.ontransitionend=（）=>resolve（）；
el.classList.add（className）；
});
}
函数转换（el，类名）{
返回新承诺（解决=>{
el.ontransitionend=（）=>resolve（）；
el.classList.remove（className）；
});
}
异步函数fadeIn（el）{
el.style.display=“块”；
等待transTo（el，“show”）；
}
异步功能衰减（el）{
等待转换（el，“显示”）；
el.style.display=“无”；
}
const basic=document.querySelector（“.blockA”）；
const btnFadeIn=document.querySelector（“.btn.fade-in”）；
const btnFadeOut=document.querySelector（“.btn.fade out”）；
btnFadeIn.onclick=（）=>{
法代因（基础）；
控制台日志（“淡入”）；
}
btnFadeOut.onclick=（）=>{
淡出（基本）；
控制台日志（“淡出”）；
}

.basic{
位置：绝对位置；
背景：蓝色；
宽度：100px；
高度：100px；
不透明度：0；
过渡：不透明度5s易入易出；
}
.表演{
不透明度：1；
}
.btn{
左边距：200px；
背景：浅蓝色；
边界半径：3px；
}

淡入
淡出

您的

onclick

处理程序还需要等待它们调用的函数

像这样：

btnFadeIn.onclick = async () => {
  await fadeIn(basic);
  console.log("fade in");
}

btnFadeOut.onclick = async () => {
  await fadeOut(basic);
  console.log("fade out");
}