在 ngx-bootstrap for angular 5 中使用动画滑动图像

Question

我正在使用 ngx-bootstrap carousel 在主页中滑动我的图片。怎么滑动带动画的图片？

Answer 1

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 2

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

在主要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：剩下的唯一问题是无论您按哪个箭头，幻灯片总是从右向左移动。我会更新答案 when/if 我解决这个问题

Answer 3

grigson 我找到了解决你问题的方法

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

该方法改变两个变量的状态（真和假）

我的旋转木马组件有 2 个 class 绑定，一个用于下一个，另一个用于上一个

所以我的 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

控制你正在鼠标悬停的 divs

:3

在 ngx-bootstrap for angular 5 中使用动画滑动图像

Sliding images with animation in ngx-bootstrap for angular 5

ngx-bootstrap

angular5