ngView and AngularJS are used to realize the animation effect
- 2020-06-19 09:42:56
- OfStack
AngularJS provides a great way to create single-page app. For this reason, our site looks more like a native mobile application. To make it look more like a native program, we can use ngAnimate module to add transitions and animations to it.
This module allows us to create beautiful programs. Today, we'll look at how to animate ES7en-ES8en.
What are we going to build
Let's say we have a single page program and want to animate that page. Clicking on a link will slide one out and slide the other in.
We will use:
Use ngRoute to route our pages Use ngAnimate to create animations for your pages Use CSS Animations for pages When we leave or enter an attempt, each of our pages will animate differentlyExtreme Animations: The animations we use here are those mentioned above. Clever animations can add a lot to your site, and the demo page alone is enough to drive us crazy. * The animation is from A Collection of Page Transitions
How does it work?
Let's take a look at how ngAnimate works. ngAnimate adds and removes different CSS class names for different Angular instructions (directive), depending on whether they enter or leave the view. For example, when we load a website, whatever we populate in ES38en-ES39en gets a.ng-ES41en class name.
All we need to do is add the CSS animation to the.ng-ES45en class name, which will automatically take effect when you enter.
ngAnimate can be applied to: ngRepeat, ngInclude, ngIf, ngSwitch, ngShow, ngHide, ngView and ngClass
Check out the ngAnimate documentation for more features of ngAnimate. Next, let's look at 1 in practice.
Start our program
The following are the documents we need:
Let's start with ES75en.html and we'll load AngularJS, ngRoute and ngAnimate. And don't forget to use Bootstrap to define styles.
<!-- 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>
That's our very simple HTML file. Load the resources we need, define our Angular app, and add the ES90en-ES91en class name to our injected view.
Let's take a look at the other 1 files we need:
Our Angular program app.js
Now we need to create a routing Angular program so that we can modify our page without refreshing the page.
// app.js
// define our application and pull in ngRoute and ngAnimate
var animateApp = angular.module('animateApp', ['ngRoute', '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 program, route, and controller.
Each controller has its own pageClass variable. The changed value is added to ng-ES118en in the ES115en.html file, so that each of our pages has a different class name. With these different class names, we can add different animations for different pages.
Views ES121en-ES122en, ES124en-ES125en.html, ES127en-ES128en.html
These should be as clear and straightforward as possible. We only need to prepare 1 text per page and a link to the other pages.
<!-- page-home.html -->
<h1>Angular Animations Shenanigans</h1>
<h2>Home</h2>
<a href="#about" class="btn btn-success btn-lg">About</a>
<a href="#contact" class="btn btn-danger btn-lg">Contact</a>
<!-- page-about.html -->
<h1>Animating Pages Is Fun</h1>
<h2>About</h2>
<a href="#" class="btn btn-primary btn-lg">Home</a>
<a href="#contact" class="btn btn-danger btn-lg">Contact</a>
<!-- page-contact.html -->
<h1>Tons of Animations</h1>
<h2>Contact</h2>
<a href="#" class="btn btn-primary btn-lg">Home</a>
<a href="#about" class="btn btn-success btn-lg">About</a>
Now we have our pages that we can inject into our main ES138en.html file by using Angular's routing capabilities.
Now all the tedious work is done. Our program should work well and modify the page well. Next, let's go to the next step and add animation to the page!
Add animation to App style.css
We will use CSS to add all the animation effects. This is great because all we have to do is add ngAnimate and add CSS animations without changing our code.
The two classes that ngAnimate added for our ng-ES156en are.ng-ES158en and.ng-ES160en. You can imagine some of their respective functions.
Basic style
To make our program look less boring, we'll add a few basic styles.
/* 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 added the basic styles for the three pages. When we click on the app, we can see that they apply different colors and spacing.
CSS animation
Let's define our animations, and then we'll see how we can apply different animations to different pages as they come in and go out.
Vendor Prefixes: We will use the default CSS attribute, without any prefix. The complete code will contain all the prefixes.
We defined six different animation effects. Each page will have their own ES181en-ES182en and ES183en-ES184en animations.
/* style.css */
...
/* ANIMATIONS
============================================================================= */
/* leaving animations ----------------------------------------- */
/* rotate and fall */
@keyframes rotateFall {
0% { transform: rotateZ(0deg); }
20% { transform: rotateZ(10deg); animation-timing-function: ease-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:translateY(100%); }
to { transform: translateY(0); }
}
Combined with the animation effects we defined above, we will apply them to our page.
Enter and leave animation effects
We just need to apply these animations to.ng-ES194en or.ng-ES196en to add unused animations to our pages.
/* style.css */
...
.ng-enter { animation: scaleUp 0.5s both ease-in; z-index: 8888; }
.ng-leave { animation: slideOutLeft 0.5s both ease-in; z-index: 9999; }
...
Now our program will have an animation like the one above. When leaving, the page slides out to the left and zooms in when entering. We also added the z-index attribute so that the page that leaves is at the top of the page that comes in.
Let's look at how to create an animation for a specific page.
Animation effects for specific pages
We created our respective Angular controllers for different pages. In these controllers, we added an pageClass and added it to our < div ng-view > In the. We'll use these class names to bring up the specific page.
Unlike the.ng-ES218en and.ng-ES220en above, we make them more specific.
...
.ng-enter { z-index: 8888; }
.ng-leave { z-index: 9999; }
/* page specific animations ------------------------ */
/* home -------------------------- */
.page-home.ng-enter { animation: scaleUp 0.5s both ease-in; }
.page-home.ng-leave { transform-origin: 0% 0%; animation: rotateFall 1s both ease-in; }
/* about ------------------------ */
.page-about.ng-enter { animation:slideInRight 0.5s both ease-in; }
.page-about.ng-leave { animation:slideOutLeft 0.5s both ease-in; }
/* contact ---------------------- */
.page-contact.ng-leave { transform-origin: 50% 50%; animation: rotateOutNewspaper .5s both ease-in; }
.page-contact.ng-enter { animation:slideInUp 0.5s both ease-in; }
...
Each page now has its own unique entry and exit animation.
conclusion
It is fairly easy to add animations to our Angular program. All you have to do is load ngAnimate and create your CSS animation. Hopefully this article has helped you understand some of the cool animations that can be done with ES233en-ES234en.
View Code : http://plnkr.co/edit/uW4v9T?p=info