CSS slide classes for Twitter Bootstrap

component-animations.less

/* The slide mixin.
 *
 * It makes use of Twitter Bootstrap mixins, but those
 * are mostly in use for browser compatibility and could
 * be rewritten without a TB dependency.
 */
.slide(@distance: 100%, @direction: right) {

    .transition-transform( ~"500ms ease-out" );

    .slide-to() when (@direction = right) {
        &.in {
            .translate(@distance,0);
        }
    }
    .slide-to() when (@direction = left) {
        &.in {
            .translate(-@distance,0);
        }
    }
    .slide-to() when (@direction = top) {
        &.in {
            .translate(0,-@distance);
        }
    }
    .slide-to() when (@direction = bottom) {
        &.in {
            .translate(0,@distance);
        }
    }

    .slide-to();
}



/* Use the mixin to create some helper classes… */
.slide.right {
    .slide(30rem, right);
}
.slide.left {
    .slide(30rem, left);
}

/* Usage:
<div id="page" class="slide right">
<div id="page" class="slide right in">
*/



/* …or use this mixin directly on an existing selector: */
#page {
    .slide(30rem, right);
}
/* Usage:
<div id="page">
<div id="page" class="in">
*/