Nested animation end jquery

Question

Works, but with an inconsistent page change

What I think is right, but the event fires

I am experimenting with a page transition and use bind () to check if the css event transition completed. After each class is added, the transition occurs and is deleted upon completion, which is known when the code is run in the bind () call, but only one callback call works. Therefore, the transition is incomplete.

Jquery

$("a").click(function () {
    // Set the effect type
    var effect = 'slide';

    // Set the options for the effect type chosen
    var options = {
        direction: $('.mySelect').val()
    };

    // Set the duration (default: 400 milliseconds)
    var duration = 500;
    var $sel = $('div.active');
    if ($(this).attr('class') === 'Contact') {
        $sel.addClass('active1');
        var $element = $('.active1').bind("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend", function (event) {
            if (event.animationName === "three") {
                console.log('the event happened');
            }
            $sel.removeClass('active');
            $sel.removeClass('active1');
            $('#Container4').addClass('active');
            $('#Container4').addClass('active2');//.delay(1500).removeClass('active2');
        });
        var $element1 = $('.active2').bind("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend", function (event) {
            alert("da1");
            $(this).removeClass('active2');
        });
    }

    if ($(this).attr('class') === 'About') {
        $sel.addClass('active1');
        var $element = $('.active1').bind("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend", function (event) {
            if (event.animationName === "three") {
                console.log('the event happened');
            }
            $sel.removeClass('active');
            $sel.removeClass('active1');

            $('#Container3').addClass('active');
            $('#Container3').addClass('active2');//.delay(1500).removeClass('active2');
        });

        var $element1 = $('.active2').bind("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend", function (event) {
            $(this).removeClass('active2');
        });
    }

    if ($(this).attr('class') === 'Services') {
        $sel.addClass('active1');
        var $element = $('.active1').bind("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend", function (event) {
            if (event.animationName === "three") {
                console.log('the event happened');
            }
            $sel.removeClass('active');
            $sel.removeClass('active1');
            $('#Container2').addClass('active');
        });

        $('#Container2').addClass('active');
        $('#Container2').addClass('active2');
        var $element1 = $('.active2').bind("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend", function (event) {
            $(this).removeClass('active2');
        });
    }

    if ($(this).attr('class') === 'Home') {
        $sel.addClass('active1');
        var $element = $('.active1').bind("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend", function (event) {
            if (event.animationName === "three") {
                console.log('the event happened');
            }
            $sel.removeClass('active');
            $sel.removeClass('active1');
            $('#Container1').addClass('active');
        });

        $('#Container1').addClass('active');
        $('#Container1').addClass('active2');

        var $element1 = $('.active2').bind("webkitAnimationEnd oAnimationEnd msAnimationEnd animationend", function (event) {
            $(this).removeClass('active2');
        });
        $('#Container1').toggle(effect, 'right', '10');
    }
});

Want a solution without using a third-party plug-in and explain why this discrepancy occurs in detail

Decision

Solvable Demonstration

Answer 1

, :

• , 'active1', , bind().
• , 'active2', , bind().
• , 'active2' ( , 2)

JQuery :

; , bind()

?

Answer 2

JQuery- : http://ricostacruz.com/jquery.transit/

CSS3, , . :

$('div').transit({opacity: .5, rotateX: 30, delay: 200}, 2000, function(){

   // THE ANIMATION COMPLETED    

});

:

$('div').transit({scale: 3.2}).transit({x: 300, y: 400}).transit({x:400, y: 500});

, , ..