Javascript 单击js时的转换持续时间

我有一个带按钮的页面；当我点击它时，我想有一个显示块的过渡，并移除按钮

这是我的密码：

HTML

当我点击按钮时，这是我的听众

document.querySelector('.launch-game').addEventListener('click', 
function() {
    document.querySelector('.launch-game').style.display = 'none';
    document.querySelector('.wrapper').style.display = 'block';
    document.querySelector('.wrapper').style.opacity = '1';
});

---

而不是显示无/块。最初将高度和宽度保持为0，然后将其设置为自动。转换不适用于显示无->块转换

document.querySelector（'.launch game'）。addEventListener（'click'，
函数（）{
document.querySelector（'.launch game'）.style.display='none'；
document.querySelector（'.wrapper'）.style.width='auto'；
document.querySelector（'.wrapper'）.style.height='auto'；
document.querySelector（'.wrapper'）.style.opacity='1'；
});
.wrapper{
转换：翻译（-50%，-50%）；
背景色：#fff；
盒影：0px 10px 50px rgba（0,0,0,0.3）；
溢出：隐藏；
宽度：0；
身高：0；
过渡：不透明度2s；
不透明度：0；
}
.启动游戏{
文本对齐：居中；
字体系列：Lato；
字体大小：20px；
文本转换：大写；
光标：指针；
字体大小：300；
}

启动游戏


相关：
.wrapper {
    transform: translate(-50%, -50%);
    background-color: #fff;
    box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: none;
    transition: opacity 2s;
    opacity: 0;
}

.launch-game {
    text-align: center;
    font-family: Lato;
    font-size: 20px;
    text-transform: uppercase;
    cursor: pointer;
    font-weight: 300;
}

document.querySelector('.launch-game').addEventListener('click', 
function() {
    document.querySelector('.launch-game').style.display = 'none';
    document.querySelector('.wrapper').style.display = 'block';
    document.querySelector('.wrapper').style.opacity = '1';
});