Angularjs switching ngview view-container animation direction – left, then right – using view-frames and keyframes and rootScope

index.html:

<div class=”view-container” id=”view-containerWrapper”>
<div class=”{{rootAnimation}}” ng-view></div>
</div>

_animate.scss:

.view-container {
/* position: relative;*/
}
/* Index loads w/o animation */
.view-frame-0.ng-enter {
background: white;
position: absolute;
top: 0;
left: 0;
right: 0;
}
.view-frame-0.ng-leave {
background: white;
position: absolute;
top: 0;
left: 0;
right: 0;
}
/* Page 2 animated in from the right, index animates out to the left */
.view-frame-1.ng-enter {
background: white;
position: absolute;
top: 0;
left: 0;
right: 0;

-webkit-animation: 1.0s slide2;
-moz-animation: 1.0s slide2;
-o-animation: 1.0s slide2;
animation: 1.0s slide2;
z-index: 100;
}

.view-frame-1.ng-leave {
background: white;
position: absolute;
top: 0;
left: 0;
right: 0;
width:100%;

-webkit-animation: 1.0s slide0;
-moz-animation: 1.0s slide0;
-o-animation: 1.0s slide0;
animation: 1.0s slide0;
z-index: 100;
}
/* Page 2 animates out to the right, index animates back from the left */
.view-frame-2.ng-enter {
background: white;
position: absolute;
top: 0;
left: 0;
right: 0;
width:100%;

-webkit-animation: 1.0s slide3;
-moz-animation: 1.0s slide3;
-o-animation: 1.0s slide3;
animation: 1.0s slide3;
z-index: 100;
}

.view-frame-2.ng-leave {
background: white;
position: absolute;
top: 0;
left: 0;
right: 0;

-webkit-animation: 1.0s slide1;
-moz-animation: 1.0s slide1;
-o-animation: 1.0s slide1;
animation: 1.0s slide1;
z-index: 100;
}

/* Slide 0 – From active to the left */
@keyframes slide0 {
0% {
left: 0;
top: 0;
}
100% {
left: -100%;
top: 0;
}
}
@-moz-keyframes slide0 {
0% {
left: 0;
top: 0;
}
100% {
left: -100%;
top: 0;
}
}

@-webkit-keyframes slide0 {
0% {
left: 0;
top: 0;
}
100% {
left: -100%;
top: 0;
}
}

@keyframes slide0 {
0% {
left: 0;
top: 0;
}
100% {
left: -100%;
top: 0;
}
}

@-moz-keyframes slide0 {
0% {
left: 0;
top: 0;
}
100% {
left: -100%;
top: 0;
}
}

@-webkit-keyframes slide0 {
0% {
left: 0;
top: 0;
}
100% {
left: -100%;
top: 0;
}
}

/* slide 1 – from active to the right */

@keyframes slide1 {
0% {
left: 0;
top: 0;
}
100% {
left: 100%;
top: 0;
}
}
@-moz-keyframes slide1 {
0% {
left: 0;
top: 0;
}
100% {
left: 100%;
top: 0;
}
}

@-webkit-keyframes slide1 {
0% {
left: 0;
top: 0;
}
100% {
left: 100%;
top: 0;
}
}

@keyframes slide1 {
0% {
left: 0;
top: 0;
}
100% {
left: 100%;
top: 0;
}
}

@-moz-keyframes slide1 {
0% {
left: 0;
top: 0;
}
100% {
left: 100%;
top: 0;
}
}

@-webkit-keyframes slide1 {
0% {
left: 0;
top: 0;
}
100% {
left: 100%;
top: 0;
}
}

/* slide 2 – from the right to active */

@keyframes slide2 {
0% {
left: 100%;
top: 0;
}
100% {
left: 0;
top: 0;
}
}
@-moz-keyframes slide2 {
0% {
left: 100%;
top: 0;
}
100% {
left: 0;
top: 0;
}
}

@-webkit-keyframes slide2 {
0% {
left: 100%;
top: 0;
}
100% {
left: 0;
top: 0;
}
}

@keyframes slide2 {
0% {
left: 100%;
top: 0;
}
100% {
left: 0;
top: 0;
}
}

@-moz-keyframes slide2 {
0% {
left: 100%;
top: 0;
}
100% {
left: 0;
top: 0;
}
}

@-webkit-keyframes slide2 {
0% {
left: 100%;
top: 0;
}
100% {
left: 0;
top: 0;
}
}

/* slide 3 – from the left to active */

@keyframes slide3 {
0% {
left: -100%;
top: 0;
}
100% {
left: 0;
top: 0;
}
}
@-moz-keyframes slide3 {
0% {
left: -100%;
top: 0;
}
100% {
left: 0;
top: 0;
}
}

@-webkit-keyframes slide3 {
0% {
left: -100%;
top: 0;
}
100% {
left: 0;
top: 0;
}
}

@keyframes slide3 {
0% {
left: -100%;
top: 0;
}
100% {
left: 0;
top: 0;
}
}

@-moz-keyframes slide3 {
0% {
left: -100%;
top: 0;
}
100% {
left: 0;
top: 0;
}
}

@-webkit-keyframes slide3 {
0% {
left: -100%;
top: 0;
}
100% {
left: 0;
top: 0;
}
}

products.html:

<div ng-repeat-start=”prod in products” headersloaded class=”followMeBar”>
<i class=”iseFontIcons icon-{{prod.icon}}”></i>
{{ prod.Name | uppercase }}
</div>

<ul class=”nav nav-tabs nav-stacked” ng-repeat-end>
<li ng-repeat=”cat in prod.Categories” productsloaded>
<a href=” ng-click=’go(“product_{{prod.ID}}/category_{{cat.ID}}”,”view-frame-1″)’>{{cat.Name}}</a>
</li>
</ul>

finally, in the controller…that go method:

$scope.go = function(path,newAnimation) {
$rootScope.rootAnimation = newAnimation;
$location.path(path);
}

┬ácan’t remember if this ends up mattering, if so just for the sake of it, the important wrappers from _main.scss:

#mainWrap{
position:relative;
}
.ng-view{
position:relative;
}
#headerBar{

width:100%;
}
.view-container{
width:100%;
position: relative;
}
#view-containerWrapper{
position:relative;
}
.viewsWrapper{
border-right: 1px solid #f1f1f1;
border-left: 1px solid #f1f1f1;
width:100%;
position:absolute;
}
#productsWrapper{
top:0px;
z-index:0;
}

Leave a Reply

You must be logged in to post a comment.