Chaining with classes

This example shows how to chain transitions by using transitional classes and Promises.

Click on the button to intitiate transition:

transitionable div

Code-example:

.container {
    background-color: #F00;
    text-align: center;
    margin: 2em 0;
    padding: 1em;
    border: solid 1px #000;
    position: absolute;
    top: 28em;
    left: 16em;
    z-index: 1;
    color: #FFF;
    -webkit-transition: all 1.5s;
    -moz-transition: all 1.5s;
    -ms-transition: all 1.5s;
    -o-transition: all 1.5s;
    transition: all 1.5s;
}
.container.blue {
    background-color: #00F;
}
.container.big {
    height: 200px;
    width: 400px;
}

<body>
    <div id="btncontainer">
        <button id="btntransform">Start transitioning</button>
    </div>
    <div class="container">transitionable div</div>
</body>

<script src="itsabuild-min.js"></script>
<script>
    var container = document.getElement('.container'),
        button = document.getElement('#btntransform'),
        setClasses, removeClasses, transform;

    setClasses = function() {
        return container.setClass('big', true).then(
           container.setClass.bind(container, 'blue', true)
        );
    };

    removeClasses = function() {
        return container.removeClass('blue', true).then(
           container.removeClass.bind(container, 'big', true)
        );
    };

    transform = function() {
        var transferPromise = container.hasClass('big') ? removeClasses() : setClasses();
        button.setClass('pure-button-disabled');
        transferPromise.finally(
            function() {
                button.removeClass('pure-button-disabled');
            }
        );
    };

    ITSA.Event.after('tap', transform, '#btntransform');

</script>

API Docs

Examples

Module-documentation

Chaining with classes