Delaying css transition with jquery

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

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/