我有一个带有按钮的页面;当我点击它时，我想有一个过渡，显示一个块并删除按钮。
这是我的代码：
.HTML
<body>
<p class="launch-game">Launch Game</p>
<div class="wrapper clearfix">
<form>
<p id="question" class="question"></p>
<div class="block-answers">
<button id="answer-0" type="submit" class="answer"></button>
<button id="answer-1" type="submit" class="answer"></button>
<button id="answer-2" type="submit" class="answer"></button>
</div>
<p id="result" class="result"></p>
</form>
</div>
<script src="script.js"></script>
</body>
.CSS
.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';
});
而不是显示 none/block。最初将高度和宽度保持为 0，然后将它们设置为自动。过渡不适用于显示非>块过渡。
document.querySelector('.launch-game').addEventListener('click',
function() {
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 {
transform: translate(-50%, -50%);
background-color: #fff;
box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.3);
overflow: hidden;
width: 0;
height: 0;
transition: opacity 2s;
opacity: 0;
}
.launch-game {
text-align: center;
font-family: Lato;
font-size: 20px;
text-transform: uppercase;
cursor: pointer;
font-weight: 300;
}<body>
<p class="launch-game">Launch Game</p>
<div class="wrapper clearfix">
<form>
<p id="question" class="question"></p>
<div class="block-answers">
<button id="answer-0" type="submit" class="answer"></button>
<button id="answer-1" type="submit" class="answer"></button>
<button id="answer-2" type="submit" class="answer"></button>
</div>
<p id="result" class="result"></p>
</form>
</div>
<script src="script.js"></script>
</body>