CODEWITHSUNDEEP
htmlcssanimationangularjscss-transitions
couzzi
couzzi

Reputation: 6366

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:

Thanks in advance.

Upvotes: 7

Views: 6031

Answers (4)

Ghostrydr
Ghostrydr

Reputation: 761

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>

Upvotes: 0

Franc
Franc

Reputation: 5496

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;
}

Upvotes: 2

Shane Daniel
Shane Daniel

Reputation: 959

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;
}

Upvotes: 9

coma
coma

Reputation: 16649

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.

Upvotes: 10

Related Questions