AngularJS CSS Animations Not Working

Question

I can't get animations to work for ng-show only.

This works to fade out and fade in:

        .animate-show {
            display: block !important;
            -webkit-transition:all linear 1.5s;
            transition:all linear 1.5s;
        }

        .animate-show.ng-hide {
            opacity:0;
        }

    <div ng-show="match.userId" style="margin-right: auto; margin-left: auto;" class="padding animate-show ng-hide">
      ...
    </div>

I want to fade IN only.... no animation on hide. This doesn't work

       .animate-show {
            display: block !important;
        }

        .animate-show.ng-hide-remove.ng-hide-remove-active {
            -webkit-transition:all linear 1.5s;
            transition:all linear 1.5s;
        }

        .animate-show.ng-hide {
            opacity:0;
        }

Here's a plunkr:

http://plnkr.co/edit/9KNqt5TAZ8Ejy8eeJUQs

can you post a plunkr?

fauverism
– fauverism

2014-09-16 16:02:45 +00:00
Commented Sep 16, 2014 at 16:02 — fauverism
– fauverism, Commented Sep 16, 2014 at 16:02

a better oliver · Accepted Answer · 2014-09-16 17:32:47Z

1

.animate-show.ng-hide-remove.ng-hide-remove-active {

ng-hide-remove-active is too late, you only need ng-hide-remove.

Working plunker

answered Sep 16, 2014 at 17:32

a better oliver

26.9k2 gold badges64 silver badges67 bronze badges

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

4 Comments

Jeff Over a year ago

No impact, see plunkr.

Jeff Over a year ago

Your example only works for Angular 1.3.0RC. I'm using Ionic framework which seems to only support 1.2.4.

a better oliver Over a year ago

@Jeff There were some bugs that have been fixed with 1.2.17. You could always switch to JavaScript based animations though.

Kat Lim Ruiz Over a year ago

in my case, it seems ng-hide-remove-active makes the whole animation to stop working, I removed it as you advised, and it started working. However, this: ng-hide-remove-active was from angular docs so I'm not sure why would this still work.

Collectives™ on Stack Overflow

AngularJS CSS Animations Not Working

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related