web-dev-qa-db-ja.com

ng-bootstrapとAngular 2を使用したカルーセルのアニメーション

ng-bootstrap でカルーセルコンポーネントを使用しています。現在、angular 2コンポーネントのライフサイクル（ Githubの問題 ）で正しく機能する適切なアニメーション機能の未解決の問題があることを理解しています。

私の質問：アニメーションの回避策としてCSSを使用する方法はありますか？

カルーセルのフェードイン効果はあるがフェードアウトしない プランカー を設定しました。

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

フェードアウトを機能させる方法はありますか？移行を試みましたが失敗しました。

javascripttwitter-bootstrapangularng-bootstrap
8
user3682091

了解しました。自分の質問に答えます。次のCSSハックは、アニメーションを正常に機能させます

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

動作中 プランカー

6
user3682091

スライド間のトランジションをフェードイン/フェードアウトしたかったので、これに対するより簡単な解決策を見つけました。

::ng-deep {
  .carousel-item {
    transition: opacity 0.7s ease !important;
    position: absolute !important;
    display: block !important;
    opacity: 0;
  }

  .carousel-item.active {
    position: relative !important;
    opacity: 1;
  }
}

::ng-deepを使用したくない場合（非推奨になると思われるか、少なくとも先週 angular.io で読んだ）、グローバルスタイルファイルを使用できますすべてのコンポーネントのすべてのクラスに到達します

8
Oriol Grau

私はあなたのアプローチに基づいて左から右へのスライドアニメーションを作成することができました。アクティブなスライドは、.activeを失うと右に遷移して消え、新しい.activeはアニメーションが遅れてスライドします。

代わりにngx-swiper-wrapperを使用することをお勧めしますが--best angularこれまでに見つけたカルーセル（ https://idangero.us/swiper/ ）

.carousel-inner {
  width: 640px;
  height: 240px;
}

.carousel-item {
  padding: 40px 55px;
  opacity: 0;
  transition: opacity .3s ease-in-out;
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 0;
  display: block !important;
}

.carousel-item.active {
  z-index: 1;
  opacity: 1;
  transition-delay: .3s;
  transform: none;
  animation: slideFromLeft .3s;
  animation-delay: .3s;
}

@keyframes slideFromLeft {
  from {
    transform: translateX(-100%);
  }
  to {
    transform: none;
  }
}
3
godblessstrawberry

@ user3682091の回答を微調整した後angular 7）で動作するようになりました他の誰かに役立つことを願っています

これが私のhtmlです

<div class="section" id="carousel">
  <div class="container">
    <div class="title">
      <h4>Carousel</h4>
    </div>
    <div class="row justify-content-center" style="height: 50vw;">
      <div class="col-12" style="height: 100%; width:100%">
        <ngb-carousel>
          <ng-template ngbSlide>
            <img class="d-block" src="assets/img/bg1.jpg" alt="First slide">
            <div class="carousel-caption d-none d-md-block">
              <h5>Nature, United States</h5>
            </div>
          </ng-template>
          <ng-template ngbSlide>
            <img class="d-block" src="assets/img/bg3.jpg" alt="Second slide">
            <div class="carousel-caption d-none d-md-block">
              <h5>Somewhere Beyond, United States</h5>
            </div>
          </ng-template>
          <ng-template ngbSlide>
            <img class="d-block" src="assets/img/bg4.jpg" alt="Third slide">
            <div class="carousel-caption d-none d-md-block">
              <h5>Yellowstone National Park, United States</h5>
            </div>
          </ng-template>
        </ngb-carousel>
      </div>
    </div>
  </div>
</div>

これが私のstyle.cssファイル（グローバルcss）です

ngb-carousel {
  //   width: inherit;
  //   height: inherit;
  width: 100%;
  height: 100%;
}


.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;
  transition: opacity 1.2s ease-in-out, visibility 1.2s;
  z-index: 10;
}

.carousel-control-prev {
  z-index: 20;
}


.carousel-control-next {
  z-index: 20;
}

.carousel-indicators {
  z-index: 20;
}
0
Ian Samz

これが私がAngular 9、ng-bootstrapバージョン6.0.0で使用した2つのアニメーションです。最も簡単な方法は.carousel-item.activeに入り口のアニメーションを与えることです。アニメーションは animista.net/play/entrances 。必ずcssをグローバルstyles.cssに追加してください。

アニメーション1

Animation 1

.carousel-item.active {
    -webkit-animation: flip-in-ver-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: flip-in-ver-left 0.5s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

 @-webkit-keyframes flip-in-ver-left {
    0% {
      -webkit-transform: rotateY(80deg);
              transform: rotateY(80deg);
      opacity: 0;
    }
    100% {
      -webkit-transform: rotateY(0);
              transform: rotateY(0);
      opacity: 1;
    }
  }
  @keyframes flip-in-ver-left {
    0% {
      -webkit-transform: rotateY(80deg);
              transform: rotateY(80deg);
      opacity: 0;
    }
    100% {
      -webkit-transform: rotateY(0);
              transform: rotateY(0);
      opacity: 1;
    }
  }

アニメーション2

Animation 2

.carousel-item.active {
    -webkit-animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
            animation: tilt-in-fwd-tr 0.6s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
}

 @-webkit-keyframes tilt-in-fwd-tr {
    0% {
      -webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
              transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
      opacity: 0;
    }
    100% {
      -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
              transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
      opacity: 1;
    }
  }
  @keyframes tilt-in-fwd-tr {
    0% {
      -webkit-transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
              transform: rotateY(20deg) rotateX(35deg) translate(300px, -300px) skew(-35deg, 10deg);
      opacity: 0;
    }
    100% {
      -webkit-transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
              transform: rotateY(0) rotateX(0deg) translate(0, 0) skew(0deg, 0deg);
      opacity: 1;
    }
  }
0
Nishan Chathuranga