带有ng-boostrap和Angular 2的轮播动画 [英] Animation for carousel with ng-boostrap and Angular 2
问题描述
我正在将轮播组件与 ng-bootstrap 一起使用.我知道正确的动画功能存在一个开放的问题,该功能现在可以正确地与angular 2组件的生命周期一起使用( Github问题).
I am using the carousel component with ng-bootstrap. I understand there's an open issue for a proper animation feature that works correctly with the angular 2 component life cycle right now (Github issue).
我的问题:有没有办法将CSS用作动画的解决方法?
My question: is there a way to use CSS as a workaround for the animation?
我已经放置了一个 plunker 对轮播效果已逐渐消失,但是不会消失.
I have put up a plunker that has fade in effect for the carousel, but not fade out.
.carousel-item.active{
-webkit-animation: fadein 1.4s;
-moz-animation: fadein 1.4s;
-ms-animation: fadein 1.4s;
-o-animation: fadein 1.4s;
animation: fadein 1.4s;
}
@keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Firefox < 16 */
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Internet Explorer */
@-ms-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
/* Opera < 12.1 */
@-o-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
有没有办法使淡出效果更好?我尝试了转换但失败了.
Is there a way to make a fade out work? I have tried transition but failed.
推荐答案
好的,回答我自己的问题.以下CSS技巧将使动画工作正常
Alright, answering my own question. The following CSS hack will make the animation work just fine
ngb-carousel {
width: inherit;
height: inherit;
}
.carousel-inner {
overflow: visible;
}
.carousel-item {
display: flex !important;
opacity: 0;
visibility: hidden;
transition: opacity 1.2s ease-in-out, visibility 1.2s;
z-index: -1;
position: absolute;
}
.carousel-item.active{
opacity: 1;
visibility: visible;
z-index: 10;
}
.carousel-control-prev {
z-index: 20;
}
.carousel-control-next {
z-index: 20;
}
.carousel-indicators{
z-index: 20;
}
工作中柱塞
这篇关于带有ng-boostrap和Angular 2的轮播动画的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!