时间戳

首页 > 解决方案 > js点击的过渡持续时间

javascript - js点击的过渡持续时间

问题描述

我有一个带有按钮的页面；当我点击它时，我想要一个显示一个块并删除按钮的转换。

这是我的代码：

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;
}

这是我单击按钮时的 EvenListener

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';
});

标签： javascripthtmlcssbuttondisplay

解决方案

而不是显示无/块。最初保持高度和宽度为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>

推荐阅读