html - Angular animate ng-cloak opacity -


i cannot seem animate ng-cloak. essentially, i'm trying animate div from .containter.ng-cloak to .container.ng-binding doesn't seem work—angular loads div container ng-binding classes straight away, ignoring transition rule.

i tried using transition-delay set couple seconds, no dice.

html

<div class="container ng-cloak" ng-controller="appctrl"> 

css

.container.ng-cloak, .container.ng-binding {     opacity: 0;     transition: opacity 800ms ease-in-out; } .container.ng-binding {     opacity: 1; } 

worth noting:

  • transitioning background-color blue red seemed work expected.
  • i omitted vendor-prefixes sake of brevity.

thanks in advance.

a different approach:

http://jsfiddle.net/coma/uxcxp/2/

html

<section ng-app>     <div ng-class="{foo:true}"></div> </section> 

css

div {     width: 100px;     height: 100px;     background-color: red;     opacity: 0;     -moz-transition: opacity 0.5s ease;     -o-transition: opacity 0.5s ease;     -webkit-transition: opacity 0.5s ease;     transition: opacity 0.5s ease; }  div.foo {     opacity: 1; } 

this work cloak since angular won't set foo class until loaded.

the cloak won't work want because it'll there (as class, attribute, element...) until angular replace result of templating process, isn't same node , that's why won't transition (a transition occurs when same element changes), not changing, not same node.

take @ this:

http://jsfiddle.net/coma/uxcxp/5/

as can see in example, div next 1 being "angularized" getting fade animation because it's same div before angular taking place.


Comments

Popular posts from this blog

basic authentication with http post params android -

vb.net - Virtual Keyboard commands -

How to get multiresult with multicondition in Sql Server -