Angular animated transparency ng-cloak

Question

I can not revive ng-cloak . Essentially, I'm trying to animate .containter.ng-cloak from .containter.ng-cloak to .container.ng-binding But it doesn’t work - Angular loads the div using the container ng-binding classes, ignoring the transition rule.

I even tried using transition-delay , set for a couple of seconds, without 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; } 

Its useful to note:

• The background-color transition from blue to red seemed to work as expected.
• For brevity, I omitted the provider prefix.

Thanks in advance.

Answer 1

Another 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 a cloak, since Angular will not set the class foo until it is loaded.

The cloak will not work the way you want, because it will be there (as a class, attribute, element ...) until Angular replaces it with the result of the template process, so this is not the same node and why it will not receive the transition (the transition occurs when the same element changes), does not change, it is simply not the same node.

Take a look at this:

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

As you can see in this example, the div next to the one that is "angular" gets a fade animation because it has the same div even before Angular.

Answer 2

I understand that the answer has been accepted; however, this is doable using the ng-cloak directive as originally tried.

I use it to animate Jade markup. Mileage may vary with runtime-based Angular 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 additional classes to 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 requires that I use a cloak in a div for which angular does not snap, so this is what I ended up doing ...

(browser prefix 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>