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-colorblue 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
Post a Comment