flexbox 的 slideDown 动画答案

【问题标题】：slideDown animation for flexboxflexbox 的 slideDown 动画
【发布时间】：2012-07-06 09:32:21
【问题描述】：

好的，所以我尝试在 jquery 中重新创建“slideUp”和“slideDown”功能，但是当使用 flexbox 进行显示时！

jQuery.fn.toggleFlexbox = function() {
    var elm = $(this[0]);
    if(elm.css('display') === "none"){
        elm.css('display', '-webkit-flex');
    }else{
        elm.slideUp('fast');
    }
};

这是我已经走了多远（目前上面的代码可以工作，但是当我们用它从“none”切换到“-webkit-flex”时不会滑动，我尝试了以下）

elm.animate({"display":"-webkit-flex"}, 1000);

这根本无法工作，没有动画，没有错误或任何东西......

奇怪的是我这样做是因为如果我用我的所有对象（类“设置”的元素）开始页面，我想加载为显示 flex，然后用

隐藏它们

$('.settings').hide();

当我单击以向下滑动“设置”部分时，这似乎没有应用弹性框，但我已经转到另一个页面并在行为正确时返回它......非常奇怪！

奇怪的是，我无法在 fiddler 中重新创建它...... http://jsfiddle.net/FzqA7/ ..

【问题讨论】：

标签： jquery html css flexbox

【解决方案1】：

如果我正确理解了您的问题（这是一个很大的问题），听起来您遇到了我不久前正在努力解决的同样问题，即一旦启动（一次向下滑动，slideUp 不起作用，反之亦然）。

我通过在动画的第一次迭代后添加“return”来解决这个问题，尽管这是一个点击事件触发器，所以结束函数对于多个排列至关重要。

试试：

    jQuery.fn.toggleFlexbox = function() {
        var elm = $(this[0]);
        if(elm.css('display') === "none"){
            elm.css('display', '-webkit-flex');
            return;
        }else{
            elm.slideUp('fast');
            return;
        }
    };

对不起，如果我完全误解了你的问题，但这有点模棱两可......

【讨论】：