我对角动画不熟悉。我想测试一个具有多个动画阶段的路由器动画。
第一页(主页)具有3个不同颜色的div块。如果单击其中之一,它将平滑缩放到其宽度,变为100%。
变为100%之后,如果需要在中间显示一些文本几秒钟。
在此之后,下一页必须从中间到放大的方形动画显示
例如,它必须经历以下步骤:
必须显示放大框,因为下一页已经位于第一页之后。
要获得更多许可,请查看此websites瓷砖点击动画
我想通过角度动画来完成这项任务,而对于这种复杂的分步动画我还是陌生的。
答案 0 :(得分:1)
我无法通过一个动画来实现这一目标,但是我使用了两个动画组件来完成此任务。
对于显示框动画,我必须在应用程序组件中编写动画。
app.component.html =>
<app-header></app-header>
<nav>
<a routerLink="/home">Dashboard</a>
<a routerLink="/next">next</a>
</nav>
<div id="page" class="routeContainer" [@routeAnimation]="getDepth(myOutlet)">
<router-outlet #myOutlet="outlet"></router-outlet>
</div>
app.component.ts =>
import { Component } from '@angular/core';
import {animate, group, query, style, transition, trigger} from '@angular/animations';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css'],
animations: [
trigger('routeAnimation', [
transition('1 => 2', [
// animate the leave page away
group([
query(
':enter',
[
style({
position: 'absolute',
'z-index' : '100',
opacity: 1,
height: '100%',
width: '100%',
'clip-path': 'polygon(100px 400px, 400px 400px , 400px 500px, 100px 500px)'
}),
animate(
'3s cubic-bezier(.35,0,.25,1)',
style({
opacity: 1,
'clip-path': 'polygon(0px 0px, 100% 0px , 100% 100%, 0px 100%)'
})
),
],
{ optional: true }
),
query(
':leave',
[animate('2s', style({ opacity: 1, 'z-index': '0', }))],
{ optional: true }
)
])
]),
])
]
})
export class AppComponent {
title = 'app';
getDepth(outlet) {
return outlet.activatedRouteData['depth'];
}
}
在路由中,我们声明每个路由的深度值,例如==
const routes: Routes = [
{ path: '', redirectTo: '/home', pathMatch: 'full' },
{ path: 'home', component: MainComponent, data: {depth: 1} },
{ path: 'next', component: NextComponent, data: {depth: 2} }
];
对于幕帘动画,我在MainComponent内部分别编写了动画。
main.component.html
<div class="row main-page">
<div [ngClass] ="{'link1-animation' :helpMenuOpen, 'col-sm link1' :!helpMenuOpen }" (click)="toggle()"
[@slideInOut]="helpMenuOpen"
(@slideInOut.done)="animationDone($event)"
>
<h1>
123
</h1>
</div>
<div class="col-sm link2">
</div>
<div class="col-sm link3">
</div>
</div>
main.component.ts
@Component({
selector: 'app-main',
templateUrl: './main.component.html',
styleUrls: ['./main.component.css'],
animations: [
trigger('slideInOut', [
state('true', style({
'z-index': 2,
width: '100%',
left: 0,
'background-color': 'pink'
})),
transition('0 => 1', animate('1s ease'))
])
]
})
export class MainComponent implements OnInit {
public helpMenuOpen = false;
constructor(private router: Router) {
}
ngOnInit() {
}
toggle() {
this.helpMenuOpen = !this.helpMenuOpen ;
}
animationDone($event) {
if (this.helpMenuOpen) {
this.router.navigate(['/next']);
}
}
}
我所做的是等到窗帘动画完成后导航到下一页。当导航发生时,我上面所做的路线动画将运行。