在ngAnimate之前/之后的FadeOut / FadeIn动画

时间:2015-06-09 23:42:56

标签: css angularjs animation css-animations ng-animate

我在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; } }

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

1 个答案:

答案 0 :(得分:1)

我会尝试为fadeIn / Out添加单独的动画,并使用css动画延迟来逐个触发。 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;   
}

我想你知道fadeIn和fadeOut动画应该是什么。

<强>更新

Here's一名代码以我认为您希望它的方式工作的代码。至少在铬。您需要使用正确的前缀/无前缀才能使其在其他浏览器中运行。