Transition duration on a js click

Question

I have a page with a button; and when I click on it I want to have a transition which display a block and remove the button.

Here is my code:

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

Here is my EvenListener when I click on the button

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

Related: https://stackoverflow.com/questions/3331353/transitions-on-the-display-property — Sid Vishnoi, Aug 18 '18 at 16:23

score 0 · Accepted Answer · answered Aug 18 '18 at 16:09

Instead of display none/block. Keep height and width as 0 initially and then set them to be auto. Transitions doesn't work for display none-> block transition.

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>

Transition duration on a js click

1 Answers1