我一直在玩角度动画,最近遇到了一个似乎无法解决的问题。从路径A到路径B或从任何路径到路径A等等,转换表达式都非常有用。但是,当我从无内容转换到路径A时,似乎找不到所需的表达式。我的用户直接通过URL访问路径B,而不是通过路径A。我想让其他动画让用户在不通过路径A(使用直接URL进入路径B)而不是通过路径时淡入。他正在通过正常流量(A => B)。
我尝试使用'void => *'和'=> *',但都无法正常工作。
routerTransition
trigger('routerTransition', [
transition('=> *, Loading => *', [
query(':enter, :leave', style({ position: 'fixed', width:'100%', height: '100%' }), {optional: true}),
group([
query(
':enter',
[
style({opacity: 0}),
animate('300ms', style({opacity: 1}))
],
{optional: true}
),
query(
':leave',
[
style({opacity: 1}),
animate('300ms', style({opacity: 0}))
],
{optional: true}
)
])
]),
transition('* => Login', [
query(':enter, :leave', style({ position: 'fixed', width:'100%', height: '100%' }), {optional: true}),
group([
query(
':enter',
[
style({transform: 'translateX(-100%)'}),
animate('300ms ease-in', style({transform: 'translateX(0)'}))
],
{optional: true}
),
query(
':leave',
[
style({transform: 'translateX(0)'}),
animate('300ms ease-in', style({transform: 'translateX(100%)'}))
],
{optional: true}
)
])
]),
transition('* <=> *', [
query(':enter, :leave', style({ position: 'fixed', width:'100%', height: '100%' }), {optional: true}),
group([
query(
':enter',
[
style({transform: 'translateX(100%)'}),
animate('300ms ease-in', style({transform: 'translateX(0)'}))
],
{optional: true}
),
query(
':leave',
[
style({transform: 'translateX(0)'}),
animate('300ms ease-in', style({transform: 'translateX(-100%)'}))
],
{optional: true}
)
])
])
]);
app.component.html
<div [@routerTransition]="animatedRoute(outlet)" class="router">
<router-outlet #outlet="outlet"></router-outlet>
</div>
谢谢!
答案 0 :(得分:0)
我使用:increment和:decrement修复了这些问题,而使用直接URL不会调用它们。看起来像这样。
const routes: Routes = [
{path: '', component: LoadingComponent, pathMatch: 'full', data: {i: -1}},
{path: 'login', component: LoginComponent, data: {i: 0}},
{path: 'client/:client/panel', component: ClientPanelComponent, canActivate: [AuthGuard], data: {i: 1}}
];
export const routerAnimation = trigger('routerTransition', [
transition('-1 => *', [
query(':enter, :leave', style({ position: 'fixed', width:'100%', height: '100%' }), {optional: true}),
group([
query(
':enter',
[
style({opacity: 0}),
animate('300ms', style({opacity: 1}))
],
{optional: true}
),
query(
':leave',
[
style({opacity: 1}),
animate('300ms', style({opacity: 0}))
],
{optional: true}
)
])
]),
transition(':decrement', [
query(':enter, :leave', style({ position: 'fixed', width:'100%', height: '100%' }), {optional: true}),
group([
query(
':enter',
[
style({transform: 'translateX(-100%)'}),
animate('300ms ease-in', style({transform: 'translateX(0)'}))
],
{optional: true}
),
query(
':leave',
[
style({transform: 'translateX(0)'}),
animate('300ms ease-in', style({transform: 'translateX(100%)'}))
],
{optional: true}
)
])
]),
transition(':increment', [
query(':enter, :leave', style({ position: 'fixed', width:'100%', height: '100%' }), {optional: true}),
group([
query(
':enter',
[
style({transform: 'translateX(100%)'}),
animate('300ms ease-in', style({transform: 'translateX(0)'}))
],
{optional: true}
),
query(
':leave',
[
style({transform: 'translateX(0)'}),
animate('300ms ease-in', style({transform: 'translateX(-100%)'}))
],
{optional: true}
)
])
]),
transition('* <=> *', [
query(':enter, :leave', style({ position: 'fixed', width:'100%', height: '100%' }), {optional: true}),
group([
query(
':enter',
[
style({opacity: 0}),
animate('300ms', style({opacity: 1}))
],
{optional: true}
),
query(
':leave',
[
style({opacity: 1}),
animate('300ms', style({opacity: 0}))
],
{optional: true}
)
])
])
]);