chondric/css/transitions/slideright.css

ChondricJS App Framework

.chondric-page.next.slideright {
    display: block;
}

.chondric-page.prev.slideright {
    display: block;
}


.chondric-page.slideright .body {
    @include transition( transform 0.3s ease-in-out);
}


.chondric-page.next.slideright .body {
    display: block;
   @include transform( translate(-100%, 0));
}

.chondric-page.prev.slideright .body {
    display: block;
   @include transform( translate(100%, 0));
}

.chondric-page.slideright .navbar {
display: none;
}

.chondric-page.active.slideright .navbar {
    display: block;
opacity: 1;
@include transition( opacity 1s ease-in-out);
}
 .chondric-page.next.slideright .navbar {
display: block;
opacity: 0;
z-index: 1;
}

.chondric-page.prev.slideright .navbar {
   pointer-events:none;
display: block;
opacity: 0;
@include transition( opacity 1s ease-in-out);
z-index: 11;
}