Question

我试图使滑块成角度。我能够显示下一张和上一张图片

但是我必须在显示下一幅图像（过渡）时做一些动画。我们可以用角度做吗。

这是我的代码

https://stackblitz.com/edit/angular-y5uggz?file=src%2Fapp%2Fapp.component.html

 name = 'Angular 6';
  counter = 0;
  slideItems = [
    { src: 'https://placeimg.com/600/600/any', title: 'Title 1' },
    { src: 'https://placeimg.com/600/600/nature', title: 'Title 2' },
    { src: 'https://placeimg.com/600/600/sepia', title: 'Title 3' },
    { src: 'https://placeimg.com/600/600/people', title: 'Title 4' },
    { src: 'https://placeimg.com/600/600/tech', title: 'Title 5' }
  ];

  showNextImage() {
    if (this.counter < this.slideItems.length-1) {
      this.counter = this.counter + 1;
    }
  }

  showPreviousImage() {
    if (this.counter > 0) {
      this.counter = this.counter - 1;
    }
  }

Answer 1

首先介绍有关如何设置动画模块here的官方文档

@Component({
  ...
  animations: [trigger("fade", [  // fade animation
  state("void", style({ opacity: 0 })),
  transition("void <=> *", [animate("0.5s ease-in-out")])
  ])]
}).

她如何基于ther数组中的索引更改当前图像

 showNextImage() {
   if (this.counter < this.slideItems.length -1) {
      this.counter += 1;
    }
  }

 showPreviousImage() {
  if (this.counter >= 1) {
          this.counter = this.counter - 1;
     }
  }

html模板中的图像滑块

<ul>
  <li *ngFor="let item of slideItems;let i = index">
    <img  *ngIf="i == counter" @fade [src]="slideItems[i].src" alt="item.title">
  </li>
</ul>

stackblitz preview

如何在角度（滑块）中添加动画或过渡？

1 个答案: