带有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屋！