javascript - 使用 Zepto jumpy 的 Bootstrap 警告框高度动画

Question

我正在尝试在用户单击关闭按钮时使 Bootstrap 警告框平滑地隐藏。然而，Zepto 使警告框以一种非常奇怪的方式运行:

我正在使用以下代码来处理关闭:

$(".alert .close").click(function(){
    $(this).parent().animate({"height": "0px"}, 400, function(){
        this.hide().css("height", "");
    });
})

这是一个 fiddle :http://jsfiddle.net/ascom/HWaNj/

如何使警告框动画流畅？

更新: 将 height:0 添加到警告框使其看起来像这样:

这可能意味着 Bootstrap 中的某些东西使盒子表现得像这样。

Answer 1

好像是没有预定义的高度和溢出有关。此外，边距和填充的使用也会扭曲动画。看看这个工作示例。

$(".alert .close").click(function(event){
    $(this).parent().css('height',$(this).parent().height()+'px');
    $(this).parent().animate({
        "overflow":"hidden",
        "border-top":"none",
        "border-bottom":"none",
        "padding": "0 15px",
        "margin":0,
        "height": "0px"
    }, 400);
});

这将要求 zepto 计算元素的当前高度，以便我们可以将其动画化为 0。

http://jsfiddle.net/HWaNj/5/