Skip to content
This repository was archived by the owner on Apr 12, 2024. It is now read-only.

Commit 7bb01ba

Browse files
matskopetebacondarwin
authored andcommittedMay 7, 2015
docs(ngAnimate): add docs for the usage of the ng-animate CSS class
1 parent f7e9ff1 commit 7bb01ba

File tree

1 file changed

+29
-0
lines changed

1 file changed

+29
-0
lines changed
 

‎src/ngAnimate/module.js

+29
Original file line numberDiff line numberDiff line change
@@ -224,6 +224,35 @@
224224
*
225225
* Stagger animations are currently only supported within CSS-defined animations.
226226
*
227+
* ### The `ng-animate` CSS class
228+
*
229+
* When ngAnimate is animating an element it will apply the `ng-animate` CSS class to the element for the duration of the animation.
230+
* This is a temporary CSS class and it will be removed once the animation is over (for both JavaScript and CSS-based animations).
231+
*
232+
* Therefore, animations can be applied to an element using this temporary class directly via CSS.
233+
*
234+
* ```css
235+
* .zipper.ng-animate {
236+
* transition:0.5s linear all;
237+
* }
238+
* .zipper.ng-enter {
239+
* opacity:0;
240+
* }
241+
* .zipper.ng-enter.ng-enter-active {
242+
* opacity:1;
243+
* }
244+
* .zipper.ng-leave {
245+
* opacity:1;
246+
* }
247+
* .zipper.ng-leave.ng-leave-active {
248+
* opacity:0;
249+
* }
250+
* ```
251+
*
252+
* (Note that the `ng-animate` CSS class is reserved and it cannot be applied on an element directly since ngAnimate will always remove
253+
* the CSS class once an animation has completed.)
254+
*
255+
*
227256
* ## JavaScript-based Animations
228257
*
229258
* ngAnimate also allows for animations to be consumed by JavaScript code. The approach is similar to CSS-based animations (where there is a shared

0 commit comments

Comments
 (0)
This repository has been archived.