隐藏/显示div时滑动动画

Question

我有两个div，顶部和底部。 两个div都有动态高度，顶部div将根据变量显示或隐藏。

我想在显示或隐藏时向顶部div添加一个滑动动画，但是底部div应该与顶部div保持一致并随之滑动。

 var hide = true; var trigger = document.getElementById("trigger"); var topdiv = document.getElementById("topdiv"); trigger.addEventListener('click', function() { if (hide) { topdiv.classList.add('hide'); } else { topdiv.classList.remove('hide'); } hide = !hide; });

 div { position: relative; display: block; width: 100%; padding: 10px; } .top { background: #999; } .body { background: #555; } .hide { display: none !important; }

 <div id="topdiv" class="top hide"> <p>Top</p> </div> <div class="body"> <p>Body</p> <button id="trigger"> Trigger </button> </div>

我尝试添加变换动画，但效果仅应用于顶部div，而底部div仍然没有动画。

@keyframes topDivAnimate {
    from {
        transform: translateY(-100%);
    }

    to {
        transform:translateY(0%);
    }
}

非常感谢帮助。

Answer 1

你看起来像这样吗？ 那请试试这个：

 var trigger = document.getElementById("trigger"); var topdiv = document.getElementById("topdiv"); trigger.addEventListener('click', function() { if ($('#topdiv').css('display') == 'none') { $(topdiv).slideDown(); } else { $(topdiv).slideUp(); } });

 div { position: relative; display: block; width: 100%; padding: 10px; } .top { display: none; background: #999; } .body { background: #555; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="topdiv" class="top hide"> <p>Top</p> </div> <div class="body"> <p>Body</p> <button id="trigger"> Trigger </button> </div>

Answer 2

我会使用CSS过渡而不是动画。 我发现最简单的做法是通过设置下部div而不是上部div，并改变它的位置，使其覆盖顶部（或者当然不是）。 请参阅下面的演示，我尽可能地对CSS和JS做了最小的改动：

 var cover = true; var trigger = document.getElementById("trigger"); var bottomdiv = document.getElementsByClassName("body")[0]; trigger.addEventListener('click', function() { if (cover) { bottomdiv.classList.add('cover'); } else { bottomdiv.classList.remove('cover'); } cover = !cover; });

 div { position: relative; display: block; width: 100%; padding: 10px; } .top { background: #999; } .body { background: #555; transform: translateY(0%); transition: transform 0.5s; } .cover { transform: translateY(-100%); }

 <div id="topdiv" class="top hide"> <p>Top</p> </div> <div class="body"> <p>Body</p> <button id="trigger"> Trigger </button> </div>

Answer 3

试试这段代码，看看这是否是您想要的效果。 它使用Animate.css库，因此您需要在<head></head>链接它

function animateCSS(element, animationName, callback) {
    const node = document.querySelector(element)
    node.classList.add('animated', animationName)

    function handleAnimationEnd() {
        node.classList.remove('animated', animationName)
        node.removeEventListener('animationend', handleAnimationEnd)

        if (typeof callback === 'function') callback()
    }

    node.addEventListener('animationend', handleAnimationEnd)
}

var hide = false;
var trigger = document.getElementById("trigger");
var topdiv = document.getElementById("topdiv");

trigger.addEventListener('click', function() {
    if (!hide) {
    topdiv.classList.remove('hide');
    animateCSS('.body', 'slideInDown');
    animateCSS('#topdiv', 'slideInDown');
  } else {
    animateCSS('#topdiv', 'slideOutUp', function() {
      topdiv.classList.add('hide');
    })
    animateCSS('.body', 'slideOutUp');
  }
  hide = !hide;
});

工作Codepen演示我的解决方案

以下是有关如何使用Animate.css库的更多解释。

隐藏/显示div时滑动动画

问题描述

3 个解决方案

解决方案1
1 2019-04-23 12:04:34

解决方案2
0 已采纳 2019-04-23 12:07:02

解决方案3
0 2019-04-23 12:37:35

隐藏/显示div时滑动动画

问题描述

3 个解决方案

解决方案1 1 2019-04-23 12:04:34

解决方案2 0 已采纳 2019-04-23 12:07:02

解决方案3 0 2019-04-23 12:37:35

解决方案1
1 2019-04-23 12:04:34

解决方案2
0 已采纳 2019-04-23 12:07:02

解决方案3
0 2019-04-23 12:37:35