FadeOut/FadeIn 动画 before/after ngAnimate

Question

我在 plunker 上有这个表格并且正在努力添加淡入淡出动画。

我想做的是，在关键帧动画开始之前让内容淡出。当新视图出现时，我希望关键帧动画完成，而不是 animate.css 动画到运行（例如 fadeInUp）。

所以视图将动画化，然后视图内的内容将动画化，如果有人能帮助我，我将不胜感激。

我当前的动画正在使用以下关键帧动画：

@-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);
    }
}

运行在 ng.enter 和 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;   
}

编辑 1：

我更新了代码here

使用：

#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;
}

这是动画：

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

代码会在正确的时间出现和消失，但不会为不透明度设置动画。

Answer 1

我会尝试为 fadeIn/Out 添加单独的动画，并使用 css 动画延迟一个接一个地触发。例如：

/* 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;   
}

而且我想您知道 fadeIn 和 fadeOut 动画应该是什么。

更新：

Here's 代码以我相信您希望它工作的方式工作的笨蛋。至少在 chrome。您需要使用正确的 prefixes/no 前缀才能使其在其他浏览器中正常工作。

FadeOut/FadeIn 动画 before/after ngAnimate

FadeOut/FadeIn animations before/after ngAnimate

css

animation

css-animations

angularjs

ng-animate