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; }
}
フェードアウトを機能させる方法はありますか?移行を試みましたが失敗しました。
了解しました。自分の質問に答えます。次の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;
}
動作中 プランカー
スライド間のトランジションをフェードイン/フェードアウトしたかったので、これに対するより簡単な解決策を見つけました。
::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 で読んだ)、グローバルスタイルファイルを使用できますすべてのコンポーネントのすべてのクラスに到達します
私はあなたのアプローチに基づいて左から右へのスライドアニメーションを作成することができました。アクティブなスライドは、.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;
}
}
@ 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;
}
これが私がAngular 9、ng-bootstrapバージョン6.0.0で使用した2つのアニメーションです。最も簡単な方法は.carousel-item.active
に入り口のアニメーションを与えることです。アニメーションは animista.net/play/entrances 。必ずcss
をグローバルstyles.css
に追加してください。
アニメーション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
.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;
}
}