Hopiu/angular.js
1
0
Fork 0
mirror of https://github.com/Hopiu/angular.js.git synced 2026-05-09 15:24:43 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore(ngIf): Add animation code to ngIf example and docs text to ngAnimate docs

Browse source
This commit is contained in:
Matias Niemelä 2013-05-07 15:19:06 -04:00 committed by Misko Hevery
parent 404c9a653a
commit 0cb04e2e91
2 changed files with 33 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
src/ng/animator.js
View file

@ -21,6 +21,7 @@
* | {@link ng.directive:ngView#animations ngView} | enter and leave | * | {@link ng.directive:ngView#animations ngView} | enter and leave |
* | {@link ng.directive:ngInclude#animations ngInclude} | enter and leave | * | {@link ng.directive:ngInclude#animations ngInclude} | enter and leave |
* | {@link ng.directive:ngSwitch#animations ngSwitch} | enter and leave | * | {@link ng.directive:ngSwitch#animations ngSwitch} | enter and leave |
* | {@link ng.directive:ngIf#animations ngIf} | enter and leave |
* | {@link ng.directive:ngShow#animations ngShow & ngHide} | show and hide | * | {@link ng.directive:ngShow#animations ngShow & ngHide} | show and hide |
* *
* You can find out more information about animations upon visiting each directive page. * You can find out more information about animations upon visiting each directive page.

38
src/ng/directive/ngIf.js
View file

@ -43,12 +43,38 @@
* the element is removed from the DOM tree (HTML). * the element is removed from the DOM tree (HTML).
* *
* @example * @example
<doc:example> <example animations="true">
<doc:source> <file name="index.html">
Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/> Click me: <input type="checkbox" ng-model="checked" ng-init="checked=true" /><br/>
Show when checked: <span ng-if="checked">I'm removed when the checkbox is unchecked</span> Show when checked:
</doc:source> <span ng-if="checked" ng-animate="'example'">
</doc:example> I'm removed when the checkbox is unchecked.
</span>
</file>
<file name="animations.css">
.example-leave-setup, .example-enter-setup {
-webkit-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-moz-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-ms-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
-o-transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
transition:all cubic-bezier(0.250, 0.460, 0.450, 0.940) 0.5s;
}
.example-enter-setup {
opacity:0;
}
.example-enter-setup.example-enter-start {
opacity:1;
}
.example-leave-setup {
opacity:1;
}
.example-leave-setup.example-leave-start {
opacity:0;
}
</file>
</example>
*/ */
var ngIfDirective = ['$animator', function($animator) { var ngIfDirective = ['$animator', function($animator) {
return { return {