Как сделать обратную анимацию в classList.toggle?

Question

function popi() {
  document.getElementById("pop").classList.toggle('active');
}

#menu .content_toggles {
    position: absolute;
    z-index: 2;
    width: 100px;
    height: 100px;
    background-color: yellow;
    border: none;
    border-radius: 10px;
    background-image: url("img/builderhall1.png");
    background-size: 100px;
    background-repeat: no-repeat;
}

#pop .content_blocks {
    position: absolute;
    z-index: 1;
    width: 100px;
    height: 100px;
    background-color: blue;
    border: none;
    border-radius: 10px;
    margin-bottom: 50px;

}

#pop.active {
    margin-top: 103px;
    position: absolute;
    transition: all 0.5s;
}

#pop.popi {
    margin-top: 203px;
    position: absolute;
    transition: all 0.5s;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>JS</title>
    <link rel="stylesheet" href="stylet.css">
    <script src="javat.js"></script>
    <script src="jquery-3.6.0.min.js"></script>
</head>
<body>
    <div id="menu">
        <div type="button" class="content_toggles" onclick="popi()" \>
    </div>
    <div id="pop">
        <div type="button" class="content_blocks"\>
    </div>
</body>
</html>

Answer 1

Для анимации можно использовать transform

function toggleClass() {
  document.querySelector("#pop").classList.toggle('active');
}

document.querySelector('.content_toggles').addEventListener('click', toggleClass);

.content_toggles {
  position: absolute;
  z-index: 2;
  width: 100px;
  height: 100px;
  background-color: yellow;
  border: none;
  border-radius: 10px;
  background-image: url("img/builderhall1.png");
  background-size: 100px;
  background-repeat: no-repeat;
}

#pop {
  width: 100px;
  height: 100px;
  position: absolute;
  transform: translateY(0%);
  transition: transform 0.5s ease;
}

#pop .content_blocks {
  position: absolute;
  z-index: 1;
  width: 100px;
  height: 100px;
  background-color: blue;
  border: none;
  border-radius: 10px;
  margin-bottom: 50px;
}

#pop.active {
  transform: translateY(100%);
}

<div id="menu">
  <div type="button" class="content_toggles"></div>
</div>
<div id="pop">
  <div type="button" class="content_blocks"></div>
</div>

БЛОГ НА HUSL

Как сделать обратную анимацию в classList.toggle?

Ответы (1 шт):