单击时如何保持Animate?

问题描述

首先，我的英语不好，所以请理解我！

First, I am not good at English so Please understand me!

我尝试与Carousel建立相似的关系我在

I try to make similar with CarouselI write my code below

 trigger('moveImage', [
  state('left', style({
    transform: 'translateX(0)'
  })),
  state('right', style({
    transform: 'translateX(-555px)'
  })),
  transition('left => right', animate('300ms, ease-out')),
  transition('right => left', animate('300ms, ease-in'))
])

我应该使用jQuery还是其他?我真的想在单击按钮时更改有效的转换"

should I use jQuery or do other?I really want to change 'transform' valid when I click button

例如1.单击一次translateX(0)-> translateX(-100)

e.g>1. click oncetranslateX(0) -> translateX(-100)

1. 单击两次translateX(-100)-> translateX(-200)

...还有更多..

... and more..

推荐答案

component.ts

component.ts

@Component({
  selector: 'carousal-widget',
  templateUrl: './carousal-widget.component.html',
  styleUrls: ['./carousal-widget.component.scss'],
  animations: [
    trigger('carousalAnimation', [
      state('in', style({ opacity: 1, transform: 'translateX(0)' })),
      state('out', style({ display: 'none' })),
      state('prevInactive', style({ display: 'none', opacity: 0 })),
      state('nextInactive', style({ display: 'none', opacity: 0 })),
      state('prevActive', style({ opacity: 1, transform: 'translateX(0)' })),
      state('nextActive', style({ opacity: 1, transform: 'translateX(0)' })),
      transition('* => prevActive', [
        style({ transform: 'translateX(-100%)', opacity: 1 }),
        animate('0.4s', style({ transform: 'translateX(0)', opacity: 1 }))
      ]),
      transition('* => nextActive', [
        style({ transform: 'translateX(100%)', opacity: 1 }),
        animate('0.4s', style({ transform: 'translateX(0)', opacity: 1 }))
      ]),
      transition('* => prevInactive', [
        style({ transform: 'translateX(0%)', opacity: 1 }),
        animate('0.4s', style({ transform: 'translateX(100%)', opacity: 0 }))
      ]),
      transition('* => nextInactive', [
        style({ transform: 'translateX(0%)', opacity: 1 }),
        animate('0.4s', style({ transform: 'translateX(-100%)', opacity: 0 }))
      ])
    ])
  ]
})

export class CarousalWidgetComponent {

  private currentIndex: number;
  listData: any[];

  private values: any[];

  constructor() {
    this.values = [
      {
        name: "Alan",
      },
      {
        name: "Jake",
      },
      {
        name: "Harry",
      },
      {
        name: "Susan",
      },
      {
        name: "Sarah",
      },
      {
        name: "Esther",
      }
    ];
  }

  ngOnInit() {
    this.currentIndex = 0;
    let clonedArray: any[] = [];
    this.values.forEach(x => clonedArray.push(Object.assign({}, x)));
    this.listData = this.addAnimationState(clonedArray, this.values.length);
  }

  changeCarousalValue(direction: string) {
    this.listData[this.currentIndex].animationState = direction + 'Inactive';
    if (direction == 'next') {
      this.currentIndex++;
      if (this.currentIndex >= this.listData.length) {
        this.currentIndex = 0;
      }
    } else {
      this.currentIndex--;
      if (this.currentIndex < 0) {
        this.currentIndex = this.listData.length - 1;
      }
    }
    this.listData[this.currentIndex].animationState = direction + 'Active';
  }


  private addAnimationState(data: any[], index: number) {
    if(data) {
      if(data.length > 0 && index >= data.length) {
        index = data.length - 1;
      }
      for (let i = 0; i < data.length; i++) {
        if (i == index) {
          data[i].animationState = 'in';
        } else {
          data[i].animationState = 'out';
        }
      }
      this.currentIndex = index;
    } else {
      data = [];
      this.currentIndex = 0;
    }
    return data;
  }

}

html

<div *ngIf="listData?.length > 0">
  <md-icon (click)="changeCarousalValue('prev')" *ngIf="currentIndex > 0">arrow_back</md-icon>
  <div *ngFor="let value of listData" [@carousalAnimation]="value.animationState">
   {{value | json}}
  </div>
  <md-icon (click)="changeCarousalValue('next')" *ngIf="currentIndex < (listData.length - 1)">arrow_forward</md-icon>
</div>

这篇关于单击时如何保持Animate?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！