Home > Developer > JavaScript
How to Use ngView with AngularJS applications to achieve animation Effects
This article mainly introduces how to use ngView with AngularJS applications to achieve animation effects. AngularJS is a very popular JavaScript library. For more information, see
AngularJS provides a great way to create a single-page app. For this reason, our website looks more like a native mobile phone program. To make it look more like a native program, we can use the ngAnimate module to add transition and animation effects to it.
This module allows us to create beautiful programs. Today, we will look at how to add an animation effect to ng-view.
What should we build?
Let's assume that we have a single page program and want to add animation effects to this page. Clicking a link will slide one attempt and the other attempt.
We will use:
Extreme Animations: the animation effect we use here is what we mentioned above. Exquisite animation effects can add a lot of color to your site. It's just a demo page that makes us crazy. * The animation effect comes from A Collection of Page Transitions on Codrops.
How does it work?
Let's take a look at how ngAnimate works. NgAnimate adds and removes different CSS class names for different Angular commands (directive) based on whether to enter or exit the view. For example, when we load a website, A. ng-enter Class name will be obtained no matter what is filled in ng-view.
All we need to do is add the CSS animation effect to the. ng-enter Class Name, which will automatically take effect when entering.
NgAnimate can be applied to: ngRepeat, ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView, and ngClass.
Check the ngAnimate document to learn more about ngAnimate functions. Next, let's take a look at the actual application.
Start our program
The following files are required:
Starting with index.html, We will load AngularJS, ngRoute, and ngAnimate. By the way, do not forget to use Bootstrap to define styles.
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<! -- Index.html --> <! DOCTYPE html> <Html> <Head>
<! -- CSS --> <! -- Load bootstrap (bootswatch version) --> <Link rel = "stylesheet" href = "// netdna .bootstrapcdn.com/bootswatch/3.1.1/readable/bootstrap.min.css"> <Link rel = "stylesheet" href = "style.css">
<! -- JS --> <! -- Load angular, ngRoute, ngAnimate --> <Script src = "http://code.angularjs.org/1.2.13/angular.js"> </script> <Script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js"> </script> <Script src = "http://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-animate.js"> </script> <Script src = "app. js"> </script>
</Head>
<! -- Apply our angular app --> <Body ng-app = "animateApp">
<! -- Inject our views using ng-view --> <! -- Each angular controller applies a different class here --> <Div class = "page {pageClass }}" ng-view> </div>
</Body> </Html> |
The above is our very simple HTML file. Load the required resources, define our Angular app, and add the ng-view class name to the injected view.
Let's take a look at some of the other files we need:
Our Angular app. js
Now, we need to create an Angular program with a route so that we can modify our page without refreshing the new page.
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 |
// App. js
// Define our application and pull in ngRoute and ngAnimate Var animateApp = angular. module ('animateapp', ['ngroup', 'nganimate']);
// ROUTING ============================================ ============ // Set our routing for this application // Each route will pull in a different controller AnimateApp. config (function ($ routeProvider ){
$ RouteProvider
// Home page . When ('/',{ TemplateUrl: 'page-home.html ', Controller: 'maincontroller' })
// About page . When ('/about ',{ TemplateUrl: 'page-about.html ', Controller: 'aboutcontroller' })
// Contact page . When ('/contact ',{ TemplateUrl: 'page-contact.html ', Controller: 'contactcontroller' });
});
// CONTROLLERS ============================================ ======== // Home page controller AnimateApp. controller ('maincontroller', function ($ scope ){ $ Scope. pageClass = 'page-home '; });
// About page controller AnimateApp. controller ('aboutcontroller', function ($ scope ){ $ Scope. pageClass = 'page-about '; });
// Contact page controller AnimateApp. controller ('contactcontroller', function ($ scope ){ $ Scope. pageClass = 'page-contact '; }); |
Now, we have created our programs, routes, and controllers.
Each controller has its own pageClass variable. The changed value will be redirected to the ng-view in the index.html file, so that each of our pages has different class names. With these different class names, we can add different animation effects to different pages.
View page-home.html, page-about.html, page-contact.html
These should be as clear and straightforward as possible. We only need to prepare some text and links to other pages for each page.
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<! -- Page-home.html --> <H1> Angular Animations Shenanigans <H2> Home
<A href = "# about" class = "btn-success btn-lg"> About </a> <A href = "# contact" class = "btn-danger btn-lg"> Contact </a>
<! -- Page-about.html --> <H1> Animating Pages Is Fun <H2> About
<A href = "#" class = "btn-primary btn-lg"> Home </a> <A href = "# contact" class = "btn-danger btn-lg"> Contact </a>
<! -- Page-contact.html --> <H1> Tons of Animations <H2> Contact
<A href = "#" class = "btn-primary btn-lg"> Home </a> <A href = "# about" class = "btn-success btn-lg"> About </a> |
Now, we have our pages. By using the angular的 feature, we can inject these pages into our main index.html file.
Now, all the boring work has been completed. Our program should work properly and the page can be modified well. Next, let's go to the next step and add the animation effect to the page!
Add an animation effect style.css to the App
We will use CSS to add all the animation effects. This method is great, because all we have to do is add ngAnimate, And we can add CSS animation effects without modifying our code.
NgAnimate adds two classes for our ng-view:. ng-enter and. ng-leave. You can imagine their respective roles.
Basic Style
To make our program look less boring, we will add some basic styles.
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
/* Make our pages be full width and full height */ /* Positioned absolutely so that the pages can overlap each other as they enter and leave */ . Page { Bottom: 0; Padding-top: 200px; Position: absolute; Text-align: center; Top: 0; Width: 100%; }
. Page h1 {font-size: 60px ;} . Page a {margin-top: 50px ;}
/* PAGES (specific colors for each page) ========================================================== =============================================== */ . Page-home {background: # 00D0BC; color: # 00907c ;} . Page-about {background: # E59400; color: # a55400 ;} . Page-contact {background: # ffa6bb; color: #9e0000 ;} |
With the above Code, we have added basic styles for the three pages. When we click the program, we can see that they apply different colors and spacing.
CSS Animation
Let's define our animation effects, and then we will learn how we can apply unwanted animation effects to different pages when pages enter or exit.
Vendor Prefixes: we will use the default CSS attribute without any prefix. The complete code contains all prefixes.
We have defined six different animation effects. Each page has its own ng-enter and ng-leave animation effects.
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
/* Style.css */ ...
/* ANIMATIONS ========================================================== =============================================== */
/* Leaving animations -----------------------------------------*/ /* Rotate and fall */ @ Keyframes rotateFall { 0% {transform: rotateZ (0deg );} 20% {transform: rotateZ (10deg); animation-timing-function: extract-out ;} 40% {transform: rotateZ (17deg );} 60% {transform: rotateZ (16deg );} 100% {transform: translateY (100%) rotateZ (17deg );} }
/* Slide in from the bottom */ @ Keyframes slideOutLeft { To {transform: translateX (-100% );} }
/* Rotate out newspaper */ @ Keyframes rotateOutNewspaper { To {transform: translateZ (-3000px) rotateZ (360deg); opacity: 0 ;} }
/* Entering animations ---------------------------------------*/ /* Scale up */ @ Keyframes scaleUp { From {opacity: 0.3;-webkit-transform: scale (0.8 );} }
/* Slide in from the right */ @ Keyframes slideInRight { From {transform: translateX (100% );} To {transform: translateX (0 );} }
/* Slide in from the bottom */ @ Keyframes slideInUp { From {transform: translate( 100% );} To {transform: translateY (0 );} } |
Based on the animation effects defined above, we will apply them to our pages.
Enter and exit animation Effects
We only need to apply these animation effects to. ng-enter or. ng-leave to add unnecessary animation effects to our page.
?
| 1 2 3 4 5 6 7 |
/* Style.css */ ...
. Ng-enter {animation: scaleUp 0.5 s both rows-in; z-index: 8888 ;} . Ng-leave {animation: slideOutLeft 0.5 s both rows-in; z-index: 9999 ;}
... |
Now, our program will have an animation effect as above. When you exit, the page slides out to the left and is enlarged when you enter the page. We also added the z-index attribute so that the Left page will be at the upper layer of the incoming page.
Let's take a look at how to create an animation for a specific page.
Animation effects on specific pages
We have created their own Angular controllers for different pages. In these controllers, we added a pageClass and added it to our <div ng-view>. We will use these class names to draw out specific pages.
Unlike. ng-enter and. ng-leave above, we make them more concrete.
?
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
...
. Ng-enter {z-index: 8888 ;} . Ng-leave {z-index: 9999 ;}
/* Page specific animations ------------------------*/
/* Home --------------------------*/ . Page-home.ng-enter {animation: scaleUp 0.5 s both groups-in ;} . Page-home.ng-leave {transform-origin: 0% 0%; animation: rotateFall 1 s both rows-in ;}
/* About ------------------------*/ . Page-about.ng-enter {animation: slideInRight 0.5 s both trim-in ;} . Page-about.ng-leave {animation: slideOutLeft 0.5 s both rows-in ;}
/* Contact ----------------------*/ . Page-contact.ng-leave {transform-origin: 50% 50%; animation: rotateOutNewspaper. 5 s both rows-in ;} . Page-contact.ng-enter {animation: slideInUp 0.5 s both rows-in ;}
... |
Now, each page has its own unique animation effect of entering and leaving.
Summary
It is quite easy to add animation effects to our Angular program. All you need to do is load ngAnimate and create your CSS animation effect. I sincerely hope this article will help you understand some cool animation effects when using ng-view.
View Code: http://plnkr.co/edit/uW4v9T? P = info
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
