html — переключение div с помощью CSS-анимации и Javascript

Переключить div с помощью CSS-анимации и Javascript

Ваш CSS-код уже заботится о отображении части. Вам не нужно делать это снова с JavaScript. То, что вы ищете, это метод classList.toggle (). Это добавит и удалит класс .reveal-content для события click. Вот каким должен быть ваш код JavaScript:

 var div = document.querySelector("div"); var button = document.getElementById("btn-reveal"); button.addEventListener('click', function () { div.classList.toggle("reveal-content"); }); 

РЕДАКТИРОВАТЬ:

  var div = document.querySelector("div"); var button = document.getElementById("btn-reveal"); button.addEventListener('click', function () { if(div.classList.contains('slide-in-fwd-center')) { div.classList.add("slide-out-bck-center"); div.classList.remove("slide-in-fwd-center"); } }); button.addEventListener('click', function () { if(div.classList.contains('slide-out-bck-center')) { div.classList.add("slide-in-fwd-center"); div.classList.remove("slide-out-bck-center"); } }); 

В вашем коде CSS только один из классов (класс .slide-in-fwd-center или класс .slide-out-bck-center) будет применен по умолчанию.

Понравилась статья? Поделиться с друзьями:
JavaScript & TypeScript
Adblock
detector