SmoothPanels Basic Example

Basic demo of the SmoothPanels Enyo kind in action.

by MaKleSoft

HTML

<script>
    enyo.kind({
    name: "SmoothPanelsSimple",
    style: "color: #fafafa; text-align: center; line-height: 100px; font-size: 2em;",
    next: function() {
    this.$.panels.select(this.$.second);
    },
    previous: function() {
    this.$.panels.select(this.$.first, SmoothPanels.SLIDE_IN_FROM_LEFT, SmoothPanels.SLIDE_OUT_TO_RIGHT);
    },
    components: [
    {kind: "SmoothPanels", name: "panels", classes: "enyo-fill", components: [
    {name: "first", style: "background-color: blue", ontap: "next", content: "Click me!"},
    {name: "second", style: "background-color: red", ontap: "previous", content: "Click me!"}
    ]}
    ]
    });
    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: translate3d(100%, 0, 0); }
}
@keyframes slideOutToRight {
    to { transform: translate3d(100%, 0, 0); }
}

/* slide in from...

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...