Chaining transition

This example shows how to chain transitions by using node.transition().

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;
}

<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.transition([
            {property: 'width', value: '400px', duration: 2},
            {property: 'height', value: '200px', duration: 2}
        ]).then(
            container.transition.bind(
                container,
                {
                    property: 'background-color',
                    value: '#00F',
                    duration: 0.5,
                    delay: 1.5
                }
            )
        );
    };

    removeClasses = function() {
        return container.transition({
                   property: 'background-color',
                   value: '',
                   duration: 0.5
               }
        ).then(
            container.transition.bind(
                container,
                [{property: 'width', value: '', duration: 2, delay: 1.5},
                 {property: 'height', value: '', duration: 2, delay: 1.5}]
            )
        );
    };

    transform = function() {
        var transferPromise = container.hasInlineStyle('width') ? 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 transition