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. ```

x

blablabla

``` Note that I'm using angular 1.2.26.

Accepted Answer

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.

angular fade animation with css3 transtions

Solution

Problem