couzzi couzzi - 4 months ago 17
HTML Question

Angular animate ng-cloak opacity

I cannot seem to animate

ng-cloak
. Essentially, I'm trying to animate a
div
from
.containter.ng-cloak
to
.container.ng-binding

But it doesn't seem to work—Angular loads the
div
with
container ng-binding
classes straight away, ignoring the
transition
rule.

I even tried using
transition-delay
set to a 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
    from blue to red seemed to work as expected.

  • I omitted vendor-prefixes for the sake of brevity.



Thanks in advance.

Answer

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 will work like cloak since Angular won't set the foo class until is loaded.

The cloak won't work as you want because it'll be there (as a class, attribute, element...) until Angular replace it with the result of its templating process, so it isn't the same node and that's why it won't get the transition (a transition occurs when the same element changes), is not changing, is just not the same node.

Take a look at this:

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

As you can see in that example, the div next to the one being "angularized" is getting the fade animation because it's the same div even before Angular taking place.

Comments