使用 CSS animation 和 Javascript 切換 div

Question

我正在嘗試將 animation 添加到 div 中，我通過單擊按鈕顯示和隱藏。 我有我想要的 animation 但我不知道如何在 JS 中運行一個按鈕 CSS animation ..有人可以幫幫我嗎？

https://codepen.io/mattmcgilton/pen/JjjbGMB

.reveal-content {
    animation: slide-in-fwd-center 0.4s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}


 @keyframes slide-in-fwd-center {
    0% {
      transform: translateZ(-1400px);
      opacity: 0;
    }
    100% {
      transform: translateZ(0);
      opacity: 1;
    }
  }

var x = document.getElementById("reveal-content").style.display = "none";

document.getElementById("btn-reveal").addEventListener('click', function() {
    var x = document.getElementById("reveal-content");
    if (x.style.display === "none") {
      x.style.display = "block";
    } else {
      x.style.display = "none";
    }
});

Answer 1

您可以為元素使用max-height ，並為隱藏和顯示使用應用過渡。 檢查下面的片段

 document.getElementById("btn-reveal").addEventListener('click', function() { let el = document.getElementById('reveal-content'); if (el.classList.contains('hide')) { el.classList.remove('hide'); } else { el.classList.add('hide'); } });

 .wrapper { overflow: hidden; } #reveal-content { max-height: 1000px; transition: all 0.5s ease-in; }.hide { max-height: 0;important: transition. all 0;2s ease-out; }

 <button type="button" id="btn-reveal" class="btn">Button</button> <div class="wrapper"> <div id="reveal-content" class="hide"> <h2>Hide me and then reveal me</h2> <div id="json-content"> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc scelerisque dui magna, imperdiet ultricies felis pellentesque nec. Aenean iaculis tellus porttitor sapien sagittis, eu dapibus dui ultricies. In gravida arcu leo, sit amet convallis quam tincidunt tempus. Aliquam eget suscipit tortor. Maecenas eget nunc eu risus auctor lacinia. Nulla et sapien sed urna ultrices pretium non ac purus. Quisque sed egestas augue. Aliquam sit amet vulputate tortor. Sed condimentum tellus eu placerat feugiat. Nullam quis eros sed magna venenatis condimentum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed posuere lacinia facilisis. Curabitur sit amet porta dui.</p> </div> </div> </div> <div>Rest of the page...</div>

Answer 2

您的 CSS 代碼已經在處理顯示部分。 您無需使用 JavaScript 再次執行此操作。 您正在尋找的是 classList.toggle() 方法。 這將在點擊事件上添加和刪除.reveal-content class。 這就是您的 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 class 或.slide-out-bck-center 類）將作為默認應用。