Javascript 隐藏/显示div时的滑动动画

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

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

var hide=true；
var trigger=document.getElementById（“触发器”）；
var topdiv=document.getElementById（“topdiv”）；
trigger.addEventListener（'click'，function（）{
如果（隐藏）{
topdiv.classList.add（'hide'）；
}否则{
topdiv.classList.remove（'hide'）；
}
隐藏=！隐藏；
});
div{
位置：相对位置；
显示：块；
宽度：100%；
填充：10px；
}
.顶{
背景：#999；
}
.身体{
背景:#555；
}
.隐藏{
显示：无！重要；
}

顶

身体

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


var trigger=document.getElementById（“触发器”）；
var topdiv=document.getElementById（“topdiv”）；
trigger.addEventListener（'click'，function（）{
if（$（'#topdiv'）.css（'display'）=='none'）{
$（topdiv.slideDown（）；
}否则{
$（topdiv.slideUp（）；
}
});
div{
位置：相对位置；
显示：块；
宽度：100%；
填充：10px；
}
.顶{
显示：无；
背景：#999；
}
.身体{
背景:#555；
}

顶

身体

触发
我会使用CSS转换而不是动画。我发现最简单的方法是设置下div的动画，而不是设置上div的动画，并更改其位置，使其覆盖顶部div（当然，也可以不覆盖顶部div）。请参见下面的演示，我对CSS和JS进行了尽可能小的更改：


var-cover=true；
var trigger=document.getElementById（“触发器”）；
var bottomdiv=document.getElementsByClassName（“body”）[0]；
trigger.addEventListener（'click'，function（）{
如有（封面）{
bottomdiv.classList.add（'cover'）；
}否则{
bottomdiv.classList.remove（'cover'）；
}
封面=！封面；
});
div{
位置：相对位置；
显示：块；
宽度：100%；
填充：10px；
}
.顶{
背景：#999；
}
.身体{
背景:#555；
转化：translateY（0%）；
转变：转变0.5s；
}
.掩护{
转换：translateY（-100%）；
}

顶

身体

触发
试试这段代码，看看这是不是你想要的效果。它使用库，因此您需要在


下面是关于如何使用Animate.css库的更多说明。
那么您是否也希望第二个div像第一个一样隐藏？不，只是第一个div，像上面的示例一样，没有迹象表明OP正在使用或打算使用jQuery。当然，这是一个很好的解决方案，但jQuery绝对不是像这样的东西所需要的。@RobinZigmond我通常反对使用jQuery，但在这种情况下，使用jQuery简单地用几行代码来解决这个问题是有意义的。将这个jQuery解决方案与我的解决方案（使用纯JS和Animate.css库）进行比较。我们将看到我的答案，它只涉及纯css和香草JS，并且对OP的代码进行了很少的更改：-）[PS我不反对使用jQuery，我认为它对于很多用例都很好，但我不会只在一个元素上使用
slideDown
/
slideUp
]@RobinZigmond您可以在两种解决方案中看到动画效果的差异。在我的解决方案中，slideDown/slideUp的滑动效果更好。这是在这种情况下首选JQuery的主要原因。我没有看到结果有多大的差异-除了底部div在我的解决方案中达到t时没有完全对齐op.我还没有尝试修复它，但我猜这是由于填充，并且可以想出几种相对简单的方法来修复它。我使用了基本CSS和JS，因为op已经在使用它们了。PS如果动画的工作方式有明显的不同，如果你想看的话，可以在CSS中轻松定制：这是一个很好的答案但是，由于躯干和上半身的动态高度，这项工作并不容易。我找到了一个更小的解决方案，通过对上半身的
max height
设置动画，将其隐藏时设置为0，不隐藏时设置为最大合理高度。当最大高度和实际高度之间存在较大差异时，动画会稍微滞后t的顶级div，但在我的情况下，它的工作很好！
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;
});