Question

我使用ngx-bootstrap轮播在主页中滑动我的图像。如何用动画滑动图像？

Answer 1

要创建滑动动画，我想出了下一个解决方案

在主styles.scss中添加

carousel.slide-animated {
  slide.item {
    animation-duration: 1s;
    animation-fill-mode: both;
    &.active {
      width: 100%;
      animation-name: carouselSlideIn;
    }
    &:not(.active) {
      display: table-cell;
      animation-name: carouselSlideOut;
    }
  }
}

@keyframes carouselSlideIn {
  0% { transform: translateX(100%); }
  100% { transform: translateX(0); }
}
@keyframes carouselSlideOut {
  0% { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}

您可以在类似以下组件中使用它：

<carousel class="slide-animated">
  <slide><img src="slide1.jpg"/></slide>
  <slide><img src="slide2.jpg"/></slide>
  <slide><img src="slide3.jpg"/></slide>
</carousel>

PS：左边的唯一问题是，无论您按下哪个箭头，幻灯片总是从右向左移动。如果解决此问题，我将更新答案

Answer 2

https://github.com/valor-software/ngx-bootstrap/issues/281

在我添加的CSS组件中

.animated {
   -webkit-animation-duration: 1s;
   animation-duration: 1s;
   -webkit-animation-fill-mode: both;
   animation-fill-mode: both;
}
@-webkit-keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
@keyframes fadeIn {
  0% {opacity: 0;}
  100% {opacity: 1;}
}
.fadeIn {
  -webkit-animation-name: fadeIn;
  animation-name: fadeIn;
}

在我添加的html中

<carousel>
  <slide class="animated fadeIn">
    <img src="xxx.xx" class="carousel-img">
  </slide>
</carousel>

Answer 3

格里森，我找到了解决您问题的方法

在我的轮播元素之外，我创建了两个不同的div，当您将鼠标悬停在div上时会调用一个方法

该方法将两个变量的状态更改为true和false

我的轮播组件有2个类绑定，一个用于next，另一个用于prev

所以我的html看起来像这样

<div class="list" style="margin: auto;max-width: 1500px;">
<div class="prev" (mouseenter)="onPrev()" >

</div>
<div class="next" (mouseenter)="onNext()" >

</div>
<carousel
[class.slide-animated-next]="next"
[class.slide-animated-prev]="prev"
[showIndicators]="false"
[itemsPerSlide]="6"
[noWrap]="false"
[interval]="50000"
style="display: flex; justify-content: center;">

<slide *ngFor="let product of list" style="margin: 1rem">
  <app-card-no-brand-partial [imgProduto]="product.img" 
    [nomeProduto]="product.nome" [precoProduto]="product.preco">
  </app-card-no-brand-partial>
</slide>

我的CSS

carousel.slide-animated-next
 slide.item
   animation-duration: 0.5s
   animation-fill-mode: both
  &.active
   animation-name: carouselSlideIn

carousel.slide-animated-prev
 slide.item
   animation-duration: 0.5s
   animation-fill-mode: both
  &.active
   animation-name: carouselSlideOut



  @keyframes carouselSlideIn
   0%
     transform: translateX(-600%)
   100%
     transform: translateX(0)


  @keyframes carouselSlideOut
   0%
    transform: translateX(600%)
   100%
    transform: translateX(0%)

  .prev
   z-index: 20000
   position: absolute
   width: 50%
   height: 400px
   margin-left: -5%



  .next
   z-index: 20000
   position: absolute
   width: 50%
   height: 400px

   margin-left: 50%

最后我的打字稿有这个；

  prev: boolean;
  next: boolean;

  onNext() {
   this.next = true;
   this.prev = false;
  }
  onPrev() {
   this.prev = true;
   this.next = false;
  }

以及您需要的styles.css

.carousel-control-prev,
.carousel-control-next
 z-index: 20000

可以控制要移动的div

：3

使用动画在ngx-bootstrap中滑动图像以获得角度5

3 个答案: