动态创建角动画

前端之家收集整理的这篇文章主要介绍了动态创建角动画前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在创建一个分页组件,可以滑动到下一个或上一个全屏页面.因为不同浏览器和设备的问题我现在已经放弃了使用CSS转换.我有一个有效的角度动画解决方案,但新问题是它不能扩展.

import { Component } from '@angular/core';
import { animate,state,style,transition,trigger } from '@angular/animations';

@Component({
  selector: 'app-root',templateUrl: './app.component.html',styleUrls: ['./app.component.css'],animations: [
    trigger('slideTransition',[
      state('firstPage',style({ transform: 'translateX(0)' })),state('secondPage',style({ transform: 'translateX(-100%)' })),transition('firstPage=>secondPage',animate('0.6s ease')),transition('secondPage=>firstPage',animate('0.6s ease'))
  ])]
})
export class AppComponent {

  state = 'firstPage';

  nextPage() {
    this.state = 'secondPage';
  }

  prevIoUsPage() {
    this.state = 'firstShowing';
  }

}

问题是,如你所见,当我有9页时.我不想定义9个状态和18个转换.如何根据页数执行可重用状态或生成状态和转换运行时?有任何想法吗?

模板看起来像这样

<div class="container">
  <div [@slideTransition]="state" class="page">
    <h1>Page 1</h1>
    <div class="clicker" (click)="nextPage()">clickity</div>
  </div>
  <div [@slideTransition]="state" class="page">
    <h1>Page 2</h1>
    <div class="clicker" (click)="prevIoUsPage()">clackity</div>
  </div>
</div>

解决方法

我现在找到了一个可能的解决方案.虽然因为我使用margin-left进行过渡,但性能并不如预期的那么好.

import { Component } from '@angular/core';
import { animate,[
      state('prevIoUs',style({ marginLeft: '-100%',display: 'none' })),state('current',style({ marginLeft: '0' })),state('next',style({ display: 'none' })),transition('current=>prevIoUs',transition('current=>next',transition('next=>current',transition('prevIoUs=>current',animate('0.6s ease'))
    ])
  ]
})
export class AppComponent {

  state = ['current','next','next'];
  current = 0;

  next() {
    this.current = this.current + 1;
    this.updateState();
  }

  prevIoUs() {
    this.current = this.current - 1;
    this.updateState();
  }

  private updateState() {
    for (let i = 0; i < this.state.length; i++) {
      if (i < this.current) {
        this.state[i] = 'prevIoUs';
      } else if (i === this.current) {
        this.state[i] = 'current';
      } else {
        this.state[i] = 'next';
      }
    }
  }
}

和模板

<div class="the-host">
  <div [@slideTransition]="state[0]" class="fullscreen first">
    <h1>Page 1</h1>
    <div class="clicker" (click)="next()">next</div>
  </div>
  <div [@slideTransition]="state[1]" class="fullscreen second">
    <h1>Page 2</h1>
    <div class="clicker" (click)="prevIoUs()">prevIoUs</div>
    <div class="clicker" (click)="next()">next</div>
  </div>
  <div [@slideTransition]="state[2]" class="fullscreen third">
    <h1>Page 3</h1>
    <div class="clicker" (click)="prevIoUs()">prevIoUs</div>
  </div>
</div>

猜你在找的Angularjs相关文章