使用jquery延迟css转换

Question

I am trying to delay a css transition of an element based on delay function + additional 0.2s applied on it so it slides 0.2s later than initial delay of main wrapper. I add a class to it which gives it a transition to slide from right to left.

If i disable this additional delay (transition-delay), then the element slides fine when initial delay fires up. If i leave it on and add 0.2s additional delay on this inner div then the transition won't work.

Current progress on fiddle and 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

I placed your actions with the ".inner" to the delay timeout.Try with the next code

 $.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

Div with class inner has already CSS transform property. So, you need to change CSS selector for class 'left' to select through id so that it has higher specificity

Change

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

to

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

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