1

トランジションが期待どおりに動作しない理由を理解するのに苦労しています。「from」を適用し、次に「transition」を「el」に追加し、次に「to」を実行し、最後にonTransitionEndを「callback」を実行することになっています（これに、クリアするコードが少し追加されています）遷移プロパティ）。

Webkitブラウザーでは、slideDownは正しく遷移しますが、slideUpは瞬時に遷移します。Firefoxでは逆になります。

エルグ？

JSFiddle： http: //jsfiddle.net/enhTd/

var $ = function(query) {
                var a = [],
                    n = document.querySelectorAll(query),
                    l = n.length;

                for( var i = 0; i<l; i++){
                    a.push(n[i]);
                    }
                if(l>1) {return a;} else {return a[0];}

                },
    $id = function(query) { return document.getElementById(query);},
    getSupportedPropertyName = function(properties) {
        for (var i = 0; i < properties.length; i++) {
            if (typeof document.body.style[properties[i]] != "undefined") {
                return properties[i];
            }
        }
        return null;
    },
    vendorTransitions = ["transition", "msTransition", "webkitTransition", "MozTransition", "OTransition"],
    prefixedTransitionProperty = getSupportedPropertyName(vendorTransitions),
    transition = function(opts){

        opts.from && opts.from();

        if(prefixedTransitionProperty){
            var c = opts.callback || function() {},
                el = opts.el,
                cb = function(event){
                    var ev = event, callback = c;
                    ev.target.removeEventListener(prefixedTransitionProperty+"End", cb);
                    ev.target.style[prefixedTransitionProperty] = "none";
                    if(callback) {
                        callback(ev);
                        }
                    };

            el.style[prefixedTransitionProperty] = opts.transition || "";
            el.addEventListener(prefixedTransitionProperty+"End", cb);
        }

        opts.to && opts.to();

    },
    slideDown = function(el, t){
        var style = el.style,
            h, oh = el.offsetHeight,
            t = t || 1000;

        //Grab real height
        style.height = "";
        h = el.offsetHeight;

        transition({
            "el": el,
            transition: "height "+t+"ms ease",
            from: function() {
                style.height = oh+"px";
            },
            to: function(){
                style.overflow = "hidden";
                style.height = h+"px";
                },
            callback: function(event){
                event.target.style.height = "";
                }
            });


    },
    slideUp = function(el, t){
        var style = el.style,
            h = el.offsetHeight,
            t = t || 1000;

        transition({
            "el": el,
            transition: "height "+t+"ms ease",
            from: function() {
                style.height = h+"px";
                },
            to: function(){
                style.overflow = "hidden";
                style.height = "0";
                }
            });

    },
    slideToggle = function(el, t){
        var t = t || 1000;

        if(el.style.height=="0px"){
            slideDown(el, t);
        } else {
            slideUp(el, t);
        }
    };


slideUp($id("intro"));
$("a[href='#intro']").forEach(function(el){
    el.addEventListener("click", function(ev) { 
        ev.preventDefault();
        if(ev.target.classList.contains("hide")){
            slideUp($(ev.target.hash));
        } else {
            slideDown($(ev.target.hash));
        }
    });
});
$("li h3").forEach(function(el){
    el.addEventListener("click", function(ev) { 
        ev.preventDefault();
        slideToggle(ev.target.parentNode);
    });
});
4

2 に答える 2

0

一部のブラウザーでは、初期状態を設定し、最終状態を設定して、CSS トランジションが機能することを期待することはできません。

代わりに、最終状態を設定してトランジションの実行を期待する前に、初期状態を設定してレンダリングする必要があります。これをレンダリングする最も簡単な方法は、イベント ループに戻り、setTimeout()呼び出し後にさらに処理 (最終状態の設定など) を行うことです。

于 2013-03-09T05:31:12.483 に答える
0

これを試してください：http: //jsfiddle.net/enhTd/1/（chromeとffでテスト済み）

最初に: jfriend00 が話したことを実行します:

あなたの遷移関数で：

transition = function (opts) {
    ..
    setTimeout(function() {
        opts.to && opts.to();
    }, 1)
}

2番目:メソッドではコールバックは必要ありませんでしたslideDown():

slideDown = function (el, t) {
    ..
    take this out:
      /*callback: function (event) {
            event.target.style.height = "";
        }*/
    });

設計の観点から..コールバック関数は何の価値も追加していません..遷移に関しては、中断したところから続行する必要があります。

3 番目:スライドが既にダウンしている場合はスライドダウンを無効にします..しかし、それはあなたに任せます。

于 2013-03-09T08:10:25.663 に答える