FadeOut/FadeIn animations before/after ngAnimate

Question

I have this form on plunker and a struggling with adding a fade animation.

What I want to do is, before the keyframe animation starts have the content fade out. And when the new view appears, I want the the keyframe animation to finish and than an animate.css animation to run (fadeInUp for example).

So the view will animate and then the content inside the view will animate, If somebody can help me with this I would really appreciate it.

my current animation is using the following keyframe animation:

@-webkit-keyframes slideOutLeft {
    0% {
        transform: scaleY(1) scaleX(1);
    }
    20% {
        transform: scaleY(0.01) scaleX(1);
    }
    40% {
        transform: scaleY(0.005) scaleX(0.5);
    }
    50% {
        opacity: 1;
    }
    100% {
        transform: scaleY(0.005) scaleX(0.5);
        opacity: 0;
    }
}

@-webkit-keyframes slideInRight {
    0% {
        transform: scaleY(0.005) scaleX(0.5);
        background: rgba(0,188,140,1);
        opacity: 0;
    }
    50% {
        transform: scaleY(0.005) scaleX(0.5);
        background: rgba(0,188,140,1);
        z-index: 1;
        opacity: 0;
    }
    70% {
        transform: scaleY(0.005) scaleX(1);
        background: rgba(0,188,140,1);
        opacity: 1;
    }
    100% {
        transform: scaleY(1) scaleX(1);
    }
}

Running on ng.enter and ng.leave

/* enter animation */
#form-views.ng-enter { 
    -webkit-animation:slideInRight 2s both ease;
    -moz-animation:slideInRight 2s both ease;
    animation:slideInRight 2s both ease; 
}

/* leave animation */
#form-views.ng-leave            { 
    -webkit-animation:slideOutLeft 2s both ease;
    -moz-animation:slideOutLeft 2s both ease;
    animation:slideOutLeft 2s both ease;   
}

EDIT 1:

I have updated the code here

using:

#form-views.ng-enter *          {
    -webkit-animation:fadeIn 2s both ease 3s;
    -moz-animation:fadeIn 2s both ease 3s;
    animation:fadeIn 2s both ease 3s;
}

#form-views.ng-leave *          {
    -webkit-animation:fadeOut 0.5s both ease;
    -moz-animation:fadeOut 0.5s both ease;
    animation:fadeOut 0.5s both ease;
}

And this is the animation:

@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes fadeOut { from { opacity:1; } to { opacity:0; } }

The code appears and disappearing at the correct time but doesn't animate the opacity.

Answer 1

I would try adding separate animation for fadeIn/Out and using the css animation delay to trigger one after the other. E.G:

/* enter animation */
#form-views.ng-enter {
    -webkit-animation:slideInRight 2s both ease, fadeIn 1s both ease 2s;
    -moz-animation:slideInRight 2s both ease, fadeIn 1s both ease 2s;
    animation:slideInRight 2s both ease, fadeIn 1s both ease 2s; 
}

/* leave animation */
#form-views.ng-leave            { 
    -webkit-animation:slideOutLeft 2s both ease 1s, fadeOut 1s both ease;
    -moz-animation:slideOutLeft 2s both ease 1s, fadeOut 1s both ease;
    animation:slideOutLeft 2s both ease 1s, fadeOut 1s both ease;   
}

and i think you know what the fadeIn and fadeOut animations should be.

UPDATE:

Here's a plunker with the code working the way I believe you want it to work. In chrome at least. You'll need to use the correct prefixes/no prefixes to get it working in other browsers.