Question

首先，我不擅长英语所以请理解我！

我尝试与Carousel做类似的事情我在下面写下我的代码

 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还是做其他的？当我点击按钮

时，我真的想要改变'transform'

e.g＆GT; 1.单击一次 translateX（0） - ＆gt;平移X（-100）

点击两次 translateX（-100） - ＆gt;平移X（-200）

......还有更多..

Answer 1

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？

1 个答案: