twitter-bootstrap 带有 ng-boostrap 和 Angular 2 的旋转木马动画
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/42567906/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Animation for carousel with ng-boostrap and Angular 2
提问by user3682091
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).
我正在使用带有ng-bootstrap的轮播组件。我知道现在有一个适当的动画功能可以与 angular 2 组件生命周期一起正常工作（Github 问题）。
My question: is there a way to use CSS as a workaround for the animation?
我的问题：有没有办法使用 CSS 作为动画的解决方法？
I have put up a plunkerthat has fade in effect for the carousel, but not fade out.
我已经安装了一个plunker，它对旋转木马有淡入效果，但不会淡出。
.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.
有没有办法让淡出工作？我尝试过过渡但失败了。
采纳答案by user3682091
Alright, answering my own question. The following CSS hack will make the animation work just fine
好吧，回答我自己的问题。以下 CSS hack 将使动画正常工作
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;
}
Working Plunker
工作Plunker
回答by Oriol Grau
I wanted a fade in/fade out the transition between slides and found a simpler solution to this:
我想要淡入/淡出幻灯片之间的过渡，并找到了一个更简单的解决方案：
::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;
}
}
If you don't want to use ::ng-deep(it seems that is going to be deprecated, or at least I read so last week in angular.io) you can use a global styles file that will reach all classes in all components
如果您不想使用::ng-deep（这似乎将被弃用，或者至少我上周在angular.io中读到过），您可以使用一个全局样式文件，该文件将覆盖所有组件中的所有类
回答by godblessstrawberry
I managed to create left-to-right slide animation based on your approach. active slide goes out with transition to the right when it loses .activeand then new .activeslides in with delayed animation.
我设法根据您的方法创建了从左到右的幻灯片动画。活动幻灯片在丢失时向右过渡.active，然后.active以延迟动画插入新幻灯片。
though I recommend using ngx-swiper-wrapperinstead - best angular carousel I found so far (https://idangero.us/swiper/)
虽然我建议ngx-swiper-wrapper改用 - 迄今为止我发现的最好的角度旋转木马（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;
}
}回答by Ian Samz
Got it to work in angular 7 after tweaking @user3682091 answer Hope it helps someone else
在调整@user3682091 答案后让它在 angular 7 下工作希望它可以帮助其他人
Here's my html
这是我的 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>
Here's my style.css file(global css)
这是我的 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;
}
回答by Nishān Wickramrathna
Here are two animations I used in Angular 9, ng-bootstrap version 6.0.0. Easiest way is to give an entrance animation to .carousel-item.active. Animations are taken from animista.net/play/entrances. Just make sure you add the cssto global styles.css
这是我在 Angular 9，ng-bootstrap 版本 6.0.0 中使用的两个动画。最简单的方法是给.carousel-item.active. 动画取自animista.net/play/entrances。只要确保你添加css到全局styles.css
Animation 1
动画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;
}
}
Animation 2
动画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;
}
}
