Angular animate ng-cloak opacity

Question

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 1

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.