MDriven Turnkey page animation

MDriven Turnkey uses AngularJS as a front end framework. And when navigating thru pages in your MDriven Turnkey application you are really just changing the DOM content with the help of Angular routing and Turnkey server to provide definition and data for the new view.

As the routing occurs angular smacks on an extra css class on the leaving content: ng-leave and another on the content entering:  ng-enter

So by doing this:

<div data-ng-app="MDrivenAngularApp">
  <div ng-view class="page animatePage">
    ---
  </div>
</div>

And this css:

/* slide in from the right */

@keyframes slideInRight {
    from     { transform:translateX(200%); }
    to         { transform: translateX(0); }
}
@-moz-keyframes slideInRight {
    from     { -moz-transform:translateX(200%); }
    to         { -moz-transform: translateX(0); }
}
@-webkit-keyframes slideInRight {
    from     { -webkit-transform:translateX(200%); }
    to         { -webkit-transform: translateX(0); }
}

/* slide in from the left */

@keyframes slideOutLeft {
    to         { transform: translateX(-100%); }
}
@-moz-keyframes slideOutLeft {    
    to         { -moz-transform: translateX(-100%); }
}
@-webkit-keyframes slideOutLeft {
    to         { -webkit-transform: translateX(-100%); }
}



.animatePage.ng-leave     { 
    -webkit-animation:slideOutLeft 0.5s both ease-in;
    -moz-animation:slideOutLeft 0.5s both ease-in;
    animation:slideOutLeft 0.5s both ease-in;   
}

  

.animatePage.ng-enter     { 
    -webkit-animation:slideInRight 0.5s both ease-in;
    -moz-animation:slideInRight 0.5s both ease-in;
    animation:slideInRight 0.5s both ease-in;    

}

we can have an animation effect of pages going and coming.

To change this default behavior we can provide a replacement of the animationPage classes.

This can be done like this:

In license and ticket find your site and press “View Turnkey css” – here we can provide css rules that will be applied to all pages in the application.

image

Pasting in the following – saving – and then pressing “Send Settings and Restart” will have the effect to turn off the page animation completely.

.animatePage.ng-leave     { 
   -webkit-animation:nothing;
    -moz-animation:nothing;
    animation:nothing;  
 }

.animatePage.ng-enter     { 
   -webkit-animation:nothing;
    -moz-animation:nothing;
    animation:nothing;  
} 
This entry was posted in AngularJS, Turnkey and tagged , . Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*