Angular animate ng-cloak opacity - html

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.

Answer 2

I realize there's been an accepted answer; however this is doable with the ng-cloak directive as originally attempted.
I use it to animate Jade generated markup. Your Mileage May Vary with Angular runtime-templated markup.
http://codepen.io/simshanith/pen/mqCad
HTML
<div class="container ng-cloak fade-ng-cloak" ng-controller="AppCtrl">
CSS
[ng\:cloak],
[ng-cloak],
[data-ng-cloak],
[x-ng-cloak],
.ng-cloak,
.x-ng-cloak {
display: none !important;
}
.fade-ng-cloak {
opacity: 1;
-ms-filter: none;
-webkit-filter: none;
filter: none;
-webkit-transition: opacity 0.5s;
transition: opacity 0.5s;
}
.fade-ng-cloak[ng-cloak] {
display: block !important;
opacity: 0;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
}
.fade-ng-cloak.ng-cloak,
.fade-ng-cloak.ng-binding {
opacity: 0;
transition: opacity 800ms ease-in-out;
}
.fade-ng-cloak.ng-binding {
opacity: 1;
}

Answer 3

A pure CSS solution without adding extra-classes to the HTML:
HTML
<div ng-cloak>{{myProperty}}</div>
CSS
[ng-cloak] {
display: block !important;
opacity: 0;
}
[ng-cloak],
.ng-binding {
transition: opacity 300ms ease-in-out;
}
.ng-binding {
opacity: 1;
}

Answer 4

My solution is similar to some of the others, but my use case required that I use cloak on a div that angular doesn't bind to, so this is what I ended up doing...
(browser prefixes omitted for brevity)
CSS
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak{
display: none !important;
}
.fade-ng-cloak {
display: block !important;
opacity: 1;
transition: opacity 0.5s;
}
.fade-ng-cloak.ng-cloak {
opacity: 0;
}
HTML
<div class="row ng-cloak fade-ng-cloak">
<div class="col-xs-12">
<uib-accordion close-others="true">
...
</uib-accordion>
</div>
</div>