angular fade animation with css3 transtions

Question

I'm trying to fade in/out a div on click of a link using ngAnimate and css3 transitions. I have the following, but it isn't working. The div is shown/hidden, but does not fade in or out. Where did I go wrong:

.fade-in-out.ng-add {
  transition: 1s linear all;
  opacity: 0;
}

.fade-in-out.ng-add-active {
  opacity: 1;
}

.fade-in-out.ng-remove {
  transition: 1s linear all;
  opacity: 1;
}

.fade-in-out.ng-remove-active {
  opacity: 0;
}

The div is initially hidden (showMe=false). On the page is a link which sets showMe to true.

<div ng-show="showMe" class="fade-in-out">          
    <div style="float: right; cursor: pointer;" ng-click="showMe=false">x</div>
    blablabla
</div>

Note that I'm using angular 1.2.26.

tasseKATT · Accepted Answer · 2014-11-20 06:34:28Z

17

The correct classes to use are:

.my-element.ng-hide-add, .my-element.ng-hide-remove {
  transition:0.5s linear all;
}

.my-element.ng-hide-add { ... }
.my-element.ng-hide-add.ng-hide-add-active { ... }
.my-element.ng-hide-remove { ... }
.my-element.ng-hide-remove.ng-hide-remove-active { ... }

In your case this will be enough:

.fade-in-out {
  transition: 1s linear all;  
  opacity: 1;
}

.fade-in-out.ng-hide {
  opacity: 0;
}

Demo: http://plnkr.co/edit/WM60wEYeQD7J1GuHG0WL?p=preview

Note that angular-animate.js must be loaded and ngAnimate must be added as a dependant module.

answered Nov 20, 2014 at 6:34

tasseKATT

38.5k8 gold badges87 silver badges67 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user1491636 Over a year ago

Just for understanding, why would ng-show not be the correct class to use?

tasseKATT Over a year ago

Angular adds ng-hide when hiding something and removes it when showing something. Using the ng-show or ng-hide directive doesn't matter. There is no ng-show class that is added by Angular.

user1491636 Over a year ago

Since you're well versed in this area, can you take a look at a similar issue: stackoverflow.com/questions/27140770/…

tasseKATT Over a year ago

Sure, will take a look :)

toxaq Over a year ago

Thank you for your footer note, helped me avoid a giant headache!

Collectives™ on Stack Overflow

angular fade animation with css3 transtions

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related