隐藏/显示div时滑动动画

Question

I have two divs, top and bottom. 我有两个div，顶部和底部。 Both divs have dynamic height, the top div will show or hide depending on a variable. 两个div都有动态高度，顶部div将根据变量显示或隐藏。

I would like to add in a sliding animation to the top div when showing or hiding, but the bottom div should stick with the top div and slide with it too. 我想在显示或隐藏时向顶部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>

I tried adding transform animations, but the effect is only applied to the top div while the bottom div remains unanimated. 我尝试添加变换动画，但效果仅应用于顶部div，而底部div仍然没有动画。

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

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

Help is much appreciated. 非常感谢帮助。

Answer 1

Are you looking something like this? 你看起来像这样吗？ Then please try this: 那请试试这个：

 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

I would use CSS transition rather than animation. 我会使用CSS过渡而不是动画。 I've found it easiest to do by animating the lower div rather than the upper one, and changing its position so that it covers the top one (or, of course, not). 我发现最简单的做法是通过设置下部div而不是上部div，并改变它的位置，使其覆盖顶部（或者当然不是）。 See demonstration below, I've made as minimal changes as I could to the CSS and JS: 请参阅下面的演示，我尽可能地对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

Try this code and see if that's the effect you wanted. 试试这段代码，看看这是否是您想要的效果。 It uses the Animate.css library so you'll need to link that in your <head></head> 它使用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;
});

Working Codepen demo of my solution 工作Codepen演示我的解决方案

Here 's some more explanation on how to use the Animate.css library. 以下是有关如何使用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