动态创建Angular动画 [英] Dynamically create Angular animations

问题描述

我正在创建一个分页组件，该组件可以滑动到下一个或上一个全屏页面.由于不同的浏览器和设备存在问题，因此我暂时放弃了仅使用CSS过渡.我有一个有效的角度动画解决方案，但是新问题是它无法缩放.

I am creating a paging component that slides to next or previous fullscreen page. Because issues with different browsers and devices I have abandoned just using CSS transitions for now. I have a working angular animate solution but the new problem is that it doesn't scale.

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个转换.如何执行可重用状态或根据页数生成状态并转换运行时?有什么想法吗?

The problem is, as you see, when I have for example 9 pages. I do not want to define 9 states and 18 transitions. How can I do reusable states or generate the states and transitions runtime based on the number of pages? Any ideas?

模板看起来像这样

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

推荐答案

您需要将params发送到该州.这可以通过添加类成员并根据您的页码不断更新来实现.然后将其连接到您的HTML.

What you need is sending params to the state. This is possible by adding a class member and keep updating it depending on your page number. Then wire that in your HTML.

现在，以下是对现有代码的潜在补充:

Now the following is potential additions to your existing code:

animations: [
  trigger('slideTransition', [
    // ...
    state('*',
          style({ marginLeft: '{{pageMarginValue}}%' }), 
          {params: {pageMarginValue: 0}}),
    transition('*=>*', animate('0.6s ease')),
    // ...
])

]

然后将其添加到您的班级:

Then add this to your class:

export class AppComponent {
  // ...
  private currentMargin = 0;
  private step = 10; // replace with actual value

  next(): void { this.currentMargin += this.step; }
  previous(): void { this.currentMargin -= this.step; }

  // ...
}

在您的HTML中，像这样传递currentMargin:

In your HTML, pass the currentMargin like so:

<div [@slideTransition]="{value: state, params: { pageMarginValue: currentMargin }}"></div>

这篇关于动态创建Angular动画的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！