我一直在玩角度动画,我最近遇到了一个我似乎无法解决的问题。转换表达式非常有用,从路径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>
提前致谢 !
我使用以下方法修复它:increment和:使用直接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}
)
])
])
]);