Thursday, 25 June 2015

angular animation


this is a example for make animation of ng-hide


.sample-css {
  padding:10px;
  border:1px solid black;
  background:white;
}

.sample-css {  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
}

.sample-css.ng-hide {  opacity:0;
}


There is no .ng-show css for animation, because ng-show uses .ng-hide css.

Above code is standard way of using animation.


You should have a class for your html first -- sample-css.

Then, the first css above is used to set the css when the html tag is showing.  (the start key frame)

Then the last css above is used to set the css of the html tag when it is hidden. (it is weird. if it is not show, why it has a css? the css will never show. what is the css for? ) The never show hidden css is used for make the animation for the transaction, like key frame in Flash.   (the end key frame)

The css in the middle is also for "sample-css" to set "transition"



you should have this three css blocks and the "sample-css" in your html.


Addtionally, there are several other css  you can use as key frame.  (Other key frames between start and end key frames)

for example:

.ng-hide-add-active    (this is a css when the html is hiding, but users may not able to see this style if the transaction is to short)

Other css: please inspect your html and make a very long transaction, you will see it:



































No comments:

Post a comment