时间戳

首页 > 解决方案 > 使用 CSS 动画和 Javascript 切换 div

javascript - 使用 CSS 动画和 Javascript 切换 div

问题描述

我正在尝试向 div 添加动画，我通过单击按钮显示和隐藏。我有我想要的动画，但我不知道如何让 JS 中的按钮运行那个 CSS 动画。有人可以帮我吗？

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

标签： javascripthtmlcss

解决方案

您可以将 amax-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>

推荐阅读