我在 plunker 上有这张表格并努力添加淡入淡出动画。
我想要做的是,在关键帧动画开始之前让内容淡出。当新 View 出现时,我希望关键帧动画结束,然后运行 animate.css 动画(例如 fadeInUp)。
因此 View 将动画化,然后 View 内的内容将动画化,如果有人可以帮助我,我将非常感激。
我当前的动画使用以下关键帧动画:
@-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; } }
代码会在正确的时间出现和消失,但不会为不透明度设置动画。
最佳答案
我会尝试为淡入/淡出添加单独的动画,并使用 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一个 plunker 代码以我相信你希望它工作的方式工作。至少在 Chrome 中。您需要使用正确的前缀/无前缀才能使其在其他浏览器中工作。
关于css - ngAnimate 之前/之后的 FadeOut/FadeIn 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30744760/