Afficher et masquer avec une animation CSS

Question

Mon objectif est de créer une animation lors de l'affichage et du masquage d'un élément HTML. L'affichage et le masquage sont déclenchés par un bouton qui fait basculer une classe de masquage.

Voici mon code :

const button = document.querySelector('button');
const box = document.querySelector('.box');

button.addEventListener('click', () => {
  box.classList.toggle('hide');
})

.box {
  width:200px;
  height: 200px;
  border: 1px solid #000;
  background-color: gray;
  margin: 0 auto;
  opacity: 1;
  display: block;  
}

.hide {
  display: none;
  transition: all 1s ease-out;
  opacity: 0;  
}

<button>Show / Hide</button>
<div class="box hide"></div>

Answer 1

Si vous voulez utiliser des animations, n'utilisez pas display:none vous pouvez utiliser visibility

const button = document.querySelector('button');
const box = document.querySelector('.box');

button.addEventListener('click', () => {
  box.classList.toggle('hide');
})

.box {
  width:200px;
  height: 200px;
  border: 1px solid #000;
  background-color: gray;
  margin: 0 auto;
  opacity: 1;
  transition: all 1s ease-out;
  visibility: visible;  
}

.hide {
  visibility: hidden;
  transition: all 1s ease-out;
  opacity: 0;  
}

<button>Show / Hide</button>
<div class="box hide"></div>

Answer 2

Il suffit de retirer le display: block de votre cache et si vous voulez que la div show soit animée, ajoutez l'animation aussi :

const button = document.querySelector('button');
const box = document.querySelector('.box');

button.addEventListener('click', () => {
  box.classList.toggle('hide');
})

.box {
  width:200px;
  height: 200px;
  border: 1px solid #000;
  background-color: gray;
  margin: 0 auto;
  opacity: 1;
  transition: all 1s ease-out;
  display: block;  
}

.hide {
  transition: all 1s ease-out;
  opacity: 0;  
}

<button>Show / Hide</button>
<div class="box hide"></div>