使用jquery延遲css轉換

Question

我試圖基於延遲函數延遲元素的css轉換+在其上施加額外的0.2s，因此它比主包裝器的初始延遲滑動0.2秒。 我一類添加到它，給人一種transition從右向左滑動。

如果我禁用這個額外的延遲（轉換延遲），那么當初始延遲啟動時元素會很好地滑動。 如果我打開它並在這個內部div上增加0.2秒的延遲，那么轉換將不起作用。

小提琴和jquery的當前進展：

(function ($) {
    $.fn.testPlugin = function (options) {

        var settings = $.extend({
            showDiv: false,
            delayIt: null,
            trans: null,
            timing: null,
            speed: null,

        }, options);

        return this.each(function () {
            var self = this;

            // Show main
            if (settings.showDiv == true) {
                setTimeout(function () {
                    $(self).addClass("showIt");
                }, settings.delayIt);
            };

            // Show inner
            $(".inner").addClass(settings.trans + " " + settings.timing + " " + settings.speed).css({
                "transition-delay" : settings.delayIt / 1000 + 0.2 + "s", // if i delete this delay then inner div slides fine
            });

        });
    }
}(jQuery));

$(document).ready(function () {
    $("#testDiv").testPlugin({
        showDiv: true,
        delayIt: 500,
        trans: "left",
        timing: "ease",
        speed: "fast",
    });
});

Answer 1

我將您的操作與".inner"放到延遲".inner"下一個代碼

 $.fn.testPlugin = function (options) {

    var settings = $.extend({
        showDiv: false,
        delayIt: null,
        trans: null,
        timing: null,
        speed: null,

    }, options);

    return this.each(function () {
        var self = this;

        // Show main
        if (settings.showDiv == true) {
            setTimeout(function () {
                $(self).addClass("showIt");
                // Show inner
                $(".inner").addClass(settings.trans + " " + settings.timing + " " + settings.speed);

            }, settings.delayIt);
        };


    });
}

Answer 2

具有類inner Div已經具有CSS transform屬性。 因此，您需要更改類'left'的CSS選擇器以通過id進行選擇，以便它具有更高的特異性

更改

.left {
  transform: translateX(20%);
}

至

#testDiv.showIt .left {
  transform: translateX(20%);
}

JSFiddle： https ：//jsfiddle.net/7qdyeq0x/5/