Interrupt class-transition

This example shows how to interrupt a class-transition. Interruption can be done when using the interruption-methods that return a Promise, like node's class-methods or transition. These methods return Promise with extra methods: cancel, freeze and finish, which all interrupt the transition and force to the initial, current or final state immediately.

Start switching the class, while during transition experiment with canceling, freezing or finishing.

Click on the button to toggle the className:

Lets go!

Code-example:

<style type="text/css">
    .container {
        background-color: #F00;
        text-align: center;
        margin: 2em 0;
        padding: 1em;
        border: solid 1px #000;
        position: absolute;
        top: 35em;
        left: 23em;
        z-index: 1;
        color: #FFF;
        width: 300px;
        -webkit-transition: all 3s;
        -moz-transition: all 3s;
        -ms-transition: all 3s;
        -o-transition: all 3s;
        transition: all 3s;
    }
    .container.blue {
        background-color: #00F;
    }
    .container.big {
        height: 300px;
        width: 600px;
    }
</style>

<body>
    <div id="btncontainer">
        <button id="buttonswitch">Switch Class</button>
        <button id="buttoncancel" data-manipulate="transition">Cancel</button>
        <button id="buttonfreeze" data-manipulate="transition">Freeze</button>
        <button id="buttonfinish" data-manipulate="transition">Finish</button>
        <button id="buttonunfreeze" data-manipulate="frozen">Unfreeze</button>
        <button id="buttonunfreezefinish" data-manipulate="frozen">Unfreeze + finish</button>
        <button id="buttonunfreezecancel" data-manipulate="frozen">Unfreeze + cancel</button>
    </div>

    <div class="container">Lets go!</div>
</body>

<script src="itsabuild-min.js"></script>
<script>
    var container = document.getElement('.container'),
        promise, doSwitch, actionCancel, actionFreeze,
        actionUnfreeze, resetClasses, frozenButtons,
        transitionButtons, actionFinish, actionUnfreezeFinish,
        actionUnfreezeCancel, actionUnfreezeRevert, switchClassButton;

    doSwitch = function(e) {
        switchClassButton.setClass('pure-button-disabled');
        container.setText('Busy transtitioning');
        promise = container.toggleClass(['blue', 'big'], null, true);
        promise.then(function() {
            container.setText('End of transtition');
            if (!promise.frozen) {
                resetClasses(null, true);
            }
        })
        .catch(
            function(err) {
                container.setText(err);
            }
        );
        resetClasses(false);
    };

    actionCancel = function(e) {
        if (promise) {
            promise.cancel();
            resetClasses(null, true);
        }
    };

    actionFreeze = function(e) {
        if (promise) {
            promise.freeze();
            container.setText('Freezed transtitioning');
            resetClasses(true);
        }
    };

    actionUnfreeze = function(e) {
        if (promise) {
            container.setText('Restarted transtitioning');
            promise = promise.unfreeze();
            promise.then(function() {
                container.setText('End of transtition');
                if (!promise.frozen) {
                    resetClasses(null, true);
                }
            })
            .catch(
                function(err) {
                    container.setText(err);
                }
            );
            resetClasses(false);
        }
    };

    actionUnfreezeFinish = function(e) {
        if (promise) {
            promise = promise.unfreeze({finish: true});
            resetClasses(null, true);
        }
    };

    actionUnfreezeCancel = function(e) {
        if (promise) {
            promise = promise.unfreeze({cancel: true});
            resetClasses(null, true);
        }
    };

    actionFinish = function(e) {
        if (promise) {
            promise.finish();
            resetClasses(null, true);
        }
    };

    resetClasses = function(frozen, ready) {
        if (ready) {
            switchClassButton.removeClass('pure-button-disabled');
            frozenButtons.setClass('pure-button-disabled');
            transitionButtons.setClass('pure-button-disabled');
        }
        else {
            frozenButtons.toggleClass('pure-button-disabled', !frozen);
            transitionButtons.toggleClass('pure-button-disabled', frozen);
        }
    };

    switchClassButton = document.getElement('#buttonswitch');
    frozenButtons = document.getAll('[data-manipulate="frozen"]');
    transitionButtons = document.getAll('[data-manipulate="transition"]');
    resetClasses(null, true);

    ITSA.Event.after('tap', doSwitch, '#buttonswitch');
    ITSA.Event.after('tap', actionCancel, '#buttoncancel');
    ITSA.Event.after('tap', actionFreeze, '#buttonfreeze');
    ITSA.Event.after('tap', actionUnfreeze, '#buttonunfreeze');
    ITSA.Event.after('tap', actionUnfreezeFinish, '#buttonunfreezefinish');
    ITSA.Event.after('tap', actionUnfreezeCancel, '#buttonunfreezecancel');
    ITSA.Event.after('tap', actionFinish, '#buttonfinish');

</script>

API Docs

Examples

Module-documentation

Interrupt class-transition