Angularjs ng-animate fadein but it disappears?

Question

HTML:

.popup
  .notification(ng-show="showNow", ng-animate="{show: 'animate-enter'}")
     | Notification text

CSS:

.popup
  .notification
    transition-duration 3s
    transition-timing-function ease
    transition-property all
    opacity 0
    position: absolute;
    width: 250px;
    left: 200px;
    top: 110px;
    z-index: 9;
    background: darkorange;
    padding: 1rem 1rem;
    color #FFF
    line-height 1.5
    transform translateY(0px)

.popup
  .notification.animate-enter-start
    opacity 1
    transform translateY(-10px)

I'm trying to animate a popup getting it to fadein. The fade in works, but then right after the fadein animation plays it fades back out again. How do I get it to stay faded-in?

Fiddle:

http://jsfiddle.net/6Xyys/

Answer 1

Your CSS is the problem.

You need to set the final properties to the permanent class .popup .notification. Then, you need to set the initial parameters at the active class, and then the final parameters at the start class again.

You need to do this, because the classes animate-enter and animate-enter-start will be removed after the animation, so the final properties needs to be at the .popup .notification class. So, you need to set the opacity to 1 at this class.

Give us a fiddle than we can help you better.

Permanent Class:

.popup
  .notification
    opacity 1;
    position: absolute;
    width: 250px;
    left: 200px;
    top: 110px;
    z-index: 9;
    background: darkorange;
    padding: 1rem 1rem;
    color #FFF
    line-height 1.5
    transform translateY(-10px)

Setup Class:

.popup
  .notification.animate-enter-setup
    transition-duration 3s
    transition-timing-function ease
    transition-property all
    opacity 0
    transform translateY(0px)

Start Animation Class:

.popup
  .notification.animate-enter-start
    opacity 1
    transform translateY(-10px)

Look some samples at this site: ng-animate move sample