Resume
In 2014, Google has annonced its’ new front-end framework: Angular 2 which is not completely compatible with AngularJS. This passage will try to compare animation in each framework.
AngularJS
The code below is an implementation with AngularJS. Since it’s not very complicated, we will write everything in only one html file.
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="utf-8" />
<title>Test</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-animate.js"></script>
<style>
.drawer {
transition: all ease 0.25s;
background-color: skyblue;
height: 90%;
width: 200px;
position: absolute;
right: 0px;
}
.ng-hide {
right: -200px;
}
</style>
</head>
<body ng-app="ngAnimate" ng-init="hidden=true" style="overflow: hidden;">
<button ng-click="hidden=!hidden">Hide</button>
<div class="drawer" ng-hide="hidden"></div>
<p>Hidden: {{hidden}}</p>
</body>As you can see, we should use ng-app="ngAnimate" to declare that this is an AngularJS Animation app. Then, use ng-init directive to initialize the variable which named hidden.
Afterward, we use ng-click to reverse to value of hidden (which is a boolean).
Finally, we use ng-hide to verify whether hidden is true. If hidden is true, angular will automatically invoke the class ng-hide in CSS. So the div will be push to the right corner.
Angular 2
Since we have already have style files, angular files above. I suppose you have already known how to create an Angular 2 project, so we wouldn’t write again this kind of thing. Please find a cdn of Angular 2 as well as copy related stylesheet files.
<style>
/* Attention: Some codes have been hidden here*/
.transition{
transition: all ease 0.25s;
right: 0px;
}
</style>
<body>
<button (click)="hidden=!hidden">Hide</button>
<div class="drawer" [ngClass]="{'transition':hidden}"></div>
<p>Hidden: {{hidden}}</p>
</body>In this example, we can figure out that in button directive, (click)="opened=!opened" means when we click on this button, Angular 2 will reverse the value of hidden.
Similarly, [ngClass]="{'transition':opened}" means when the value of opened is true, Angular 2 will apply the class transition to the div.
Apart from that, we also have [hidden]="expression" which means we would hide the element when expression is true.
2455
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
