SmoothPanels Asynchronous Example

Example of how the async property can be used to uncouple the in animation from the out animation.

by MaKleSoft

HTML

<script>
    function wait(duration) {
        var start = new Date();
        while (new Date().getTime() - start.getTime() < duration) {
            console.log("waiting...");
        }
    }
    
    enyo.kind({
        name: "SlowPainter",
        show: function() {
            wait(200);
            this.inherited(arguments);
        }
    });
    
    enyo.kind({
        name: "SmoothPanelsSimple",
        next: function() {
            this.$.panels.select(this.$.second);
        },
        previous: function() {
            this.$.panels.select(this.$.first, SmoothPanels.SLIDE_IN_FROM_LEFT, SmoothPanels.SLIDE_OUT_TO_RIGHT);
        },
        checkbox: function() {
            this.$.panels.setAsync(this.$.checkbox.getChecked());
        },
        components: [
            {style: "position: absolute; z-index: 1;", components: [
            {kind: "Checkbox", onActivate: "checkbox"},
            {tag: "span", content: "async"}
            ]},
            {kind: "SmoothPanels", async: false, name: "panels", classes: "enyo-fill", components: [
            {kind: "SlowPainter", name: "first", style: "background-color: blue", ontap: "next"},
            {kind: "SlowPainter", name: "second", style: "background-color: red", ontap: "previous"}
            ]}
        ]
    });
    new SmoothPanelsSimple().renderInto(document.body);
</script>

CSS

.smoothpanels {
    position: relative;
    -webkit-perspective: 1000px;
    -moz-perspective: 1000px;
    -ms-perspective: 1000px;
    -o-perspective: 1000px;
    perspective : 1000px;
}
.smoothpanels > * {
    position: absolute;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -ms-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    -o-backface-visibility: hidden;
    backface-visibility: hidden;
}
/* slide in from right */
 @-webkit-keyframes slideInFromRight {
    from {
        -webkit-transform: translate3d(100%, 0, 0);
    }
}
@keyframes slideInFromRight {
    from {
        transform: translate3d(100%, 0, 0);
    }
}
/* slide out to left */
 @-webkit-keyframes slideOutToLeft {
    to {
        -webkit-transform: translate3d(-100%, 0, 0);
    }
}
@keyframes slideOutToLeft {
    to {
        transform: translate3d(-100%, 0, 0);
    }
}
/* slide in from top */
 @-webkit-keyframes slideInFromTop {
    from {
        -webkit-transform: translate3d(0, -100%, 0);
    }
}
@keyframes slideInFromTop {
    from {
        transform: translate3d(0, -100%, 0);
    }
}
/* slide out to bottom */
 @-webkit-keyframes slideOutToBottom {
    to {
        -webkit-transform: translate3d(0, 100%, 0);
    }
}
@keyframes slideOutToBottom {
    to {
        transform: translate3d(0, 100%, 0);
    }
}
/* slide in from left */
 @-webkit-keyframes slideInFromLeft {
    from {
        -webkit-transform: translate3d(-100%, 0, 0);
    }
}
@keyframes slideInFromLeft {
    from {
        transform: translate3d(-100%, 0, 0);
    }
}
/* slide out to right */
 @-webkit-keyframes slideOutToRight {
    to {
        -webkit-transform:...

JavaScript

enyo.kind({
    name: "SmoothPanels",
    classes: "smoothpanels",
    statics: {
        // A couple of built-in animations
        SLIDE_IN_FROM_RIGHT: "slideInFromRight",
        SLIDE_OUT_TO_LEFT: "slideOutToLeft",
        SLIDE_IN_FROM_TOP: "slideInFromTop",
        SLIDE_OUT_TO_BOTTOM: "slideOutToBottom",
        SLIDE_IN_FROM_LEFT: "slideInFromLeft",
        SLIDE_OUT_TO_RIGHT: "slideOutToRight",
        SLIDE_IN_FROM_BOTTOM: "slideInFromBottom",
        SLIDE_OUT_TO_TOP: "slideOutToTop",
        FADE_OUT: "fadeOut",
        FADE_IN: "fadeIn",
        NONE: "none",
        animationEventNames: {
            webkit: {start: "webkitAnimationStart", end: "webkitAnimationEnd"},
            moz: {start: "animationstart", end: "animationend"},
            ms: {start: "MSAnimationStart", end: "MSAnimationEnd"},
            o: {start: "oanimationstart", end: "oanimationend"}
        }
    },
    events: {
        onInAnimationStart: "", // Fired after the in animation has started
        onOutAnimationStart: "", // Fired after the out animation has started
        onInAnimationEnd: "", // Fired after the in animation has ended
        onOutAnimationEnd: "" // Fired after the out animation has ended
    },
    published: {
        // If true, the out animation of the old panel will be started as soon as possible
        // instead of waiting for the new panel to be rendered and painted. The result
        // is a decoupled in and out animation
        async: false,
        inAnim: "slideInFromRight", // Name of the CSS animation to use of the in animation
        outAnim: "slideOutToLeft", // Name of the CSS animation to use of the out animation
        duration: 500, // Duration to use for animations
        easing: "ease" // Timing function to use for animations
    },
    create: function() {
        this.inherited(arguments);
        // Select first panel by default
        var currentPanel = this.currentPanel = this.getClientControls()[0];
        // Hide all...