Javascript 元素分解后如何滑动块

我想知道，当警报信息消失时，是否有可能使块在警报下滑动

函数animateCSS（元素、animationName、回调）{
const node=document.querySelector（元素）
node.classList.add（'animated'，animationName）
函数handleAnimationEnd（）{
node.classList.remove（'animated'，animationName）
node.removeEventListener（'animationend'，handleAnimationEnd）
if（typeof callback==='function'）callback（）
}
node.addEventListener（'animationend'，handleAnimationEnd）
}
$（文档）.ready（函数（）{
$（“#测试按钮”）。单击（函数（）{
$（“#信息”）.css（'display'，'block'）；
animateCSS（“#REGENATINFO”，“fadeIn”，function（）{
$（“#REGENATINFO”）.removeClass（'animated fadeIn'）；
});
setTimeout（函数（）{
animateCSS（“#REGENATINFO”，“淡出”，函数（）{
$（“#REGENATINFO”）.removeClass（“动画淡出”）；
$（“#信息”）.css（'display'，'none'）；
});
}, 3000);
});
});
@charset“UTF-8”；
@-webkit关键帧fadeIn{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
@关键帧淡入淡出{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
法丹先生{
-webkit动画名称：fadeIn；
动画名称：fadeIn；
}
@-webkit关键帧淡出{
从{
不透明度：1；
}
到{
不透明度：0；
}
}
@关键帧淡出{
从{
不透明度：1；
}
到{
不透明度：0；
}
}
.淡出{
-webkit动画名称：淡出；
动画名称：淡出；
}
.动画{
-webkit动画持续时间：1s；
动画持续时间：1s；
-webkit动画填充模式：两者都有；
动画填充模式：两者都有；
}
.无限{
-webkit动画迭代计数：无限；
动画迭代次数：无限；
}
.d.delay-1s{
-webkit动画延迟：1s；
动画延迟：1s；
}
.1.2.2延迟-2秒{
-webkit动画延迟：2s；
动画延迟：2s；
}
.动画。延迟-3s{
-webkit动画延迟：3s；
动画延迟：3s；
}
.延迟-4s{
-webkit动画延迟：4s；
动画延迟：4s；
}
.动画。延迟-5s{
-webkit动画延迟：5s；
动画延迟：5s；
}
.快{
-webkit动画持续时间：800ms；
动画持续时间：800ms；
}
.快点{
-webkit动画持续时间：500ms；
动画持续时间：500ms；
}
.慢{
-webkit动画持续时间：2秒；
动画持续时间：2秒；
}
.慢一点{
-webkit动画持续时间：3s；
动画持续时间：3s；
}
@媒体（打印）（更喜欢缩小运动）{
.动画{
-webkit动画：取消设置！重要；
动画：取消设置！重要；
-webkit转换：无！重要；
过渡：无！重要；
}
}









一些信息文本
一些文本
点击我
与其淡出#REGENATINFO，不如尝试设置其高度的动画。。。或者淡出，然后设置容器高度的动画。这将使其下方的元素向上“滑动”

尝试这样做，也许：

$('#regenerateinfo').animate({
    height: 0}, {
    duration: 500,
    complete: function() { $("#regenerateinfo").css('display','none'); }
});

与其淡出#REGENATINFO，不如尝试设置其高度的动画。。。或者淡出，然后设置容器高度的动画。这将使其下方的元素向上“滑动”

尝试这样做，也许：

$('#regenerateinfo').animate({
    height: 0}, {
    duration: 500,
    complete: function() { $("#regenerateinfo").css('display','none'); }
});

下面是一个完整的工作示例。。。希望有帮助！
主要更改在$（“#测试按钮”）中。单击（函数（）{


函数animateCSS（元素、animationName、回调）{
const node=document.querySelector（元素）
node.classList.add（'animated'，animationName）
函数handleAnimationEnd（）{
node.classList.remove（'animated'，animationName）
node.removeEventListener（'animationend'，handleAnimationEnd）
if（typeof callback==='function'）callback（）
}
node.addEventListener（'animationend'，handleAnimationEnd）
}
$（文档）.ready（函数（）{
$（“#测试按钮”）。单击（函数（）{
$（“#信息”）.css（'display'，'block'）；
$（'#REGENATINFO'）。设置动画({
身高：50}{
持续时间：200，
完成：函数（）{}
});
setTimeout（函数（）{
$（'#REGENATINFO'）。设置动画({
高度：0}{
持续时间：200，
complete:function（）{$（“#REGENATINFO”）.css（'display'，'none'）；}
});
}, 3000);
});
})；
@charset“UTF-8”；
@-webkit关键帧fadeIn{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
@关键帧淡入淡出{
从{
不透明度：0；
}
到{
不透明度：1；
}
}
法丹先生{
-webkit动画名称：fadeIn；
动画名称：fadeIn；
}
@-webkit关键帧淡出{
从{
不透明度：1；
}
到{
不透明度：0；
}
}
@关键帧淡出{
从{
不透明度：1；
}
到{
不透明度：0；
}
}
.淡出{
-webkit动画名称：淡出；
动画名称：淡出；
}
.动画{
-webkit动画持续时间：1s；
动画持续时间：1s；
-webkit动画填充模式：两者都有；
动画填充模式：两者都有；
}
.无限{
-webkit动画迭代计数：无限；
动画迭代次数：无限；
}
.d.delay-1s{
-webkit动画延迟：1s；
动画延迟：1s；
}
.1.2.2延迟-2秒{
-webkit动画延迟：2s；
动画延迟：2s；
}
.动画。延迟-3s{
-webkit动画延迟：3s；
动画延迟：3s；
}
.延迟-4s{
-网络工具包动画