代码之家 › 专栏 › 技术社区 › naveen

如何在角度(滑块)中添加动画或过渡?

animation angular javascript

naveen · 技术社区 · 6 年前

我正在尝试使滑块成角度。我可以显示下一个和上一个图像。

但是我要做一些动画,同时显示下一个图像(过渡)。我们可以在角度。

这是我的密码

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;
    }
  }

1 回复 | 直到 6 年前

Muhammed Albarmavi 6 年前

here

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

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

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

<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