我正在创建一个分页组件,可以滑动到下一个或上一个全屏页面 . 因为不同浏览器和设备的问题我现在已经放弃了使用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>
2 回答
我现在找到了一个可能的解决方案 . 虽然因为我使用margin-left进行过渡,但性能并不如预期的那么好 .
和模板
你需要的是发送
params
到州 . 这可以通过添加类成员并根据您的页码继续更新它来实现 . 然后在HTML中连接 .现在,以下内容是对现有代码的潜在补充:
]
然后将其添加到您的 class :
在您的HTML中,传递
currentMargin
,如下所示: