时间戳

首页 > 解决方案 > 在这个片段中 [direction] 是什么意思

javascript - 在这个片段中 [direction] 是什么意思

问题描述

我复制了一个代码，其中组件从右侧或左侧滑动到中心，但我不知道如何使用该参数。我不知道[direction]: 0CSS 中的任何属性

function slideTo(direction) {
    const optional = {optional : true}
    return [
        query(':enter, :leave', [
            style({
                position: 'absolute',
                top:0,
                [direction]: 0,
                width: '100%'
                
            })
        ], optional),
        query(':enter',[
            style({ [direction]: '-100%' })
        ]),
        group([        
            query(':leave',[
                animate('600ms ease-in-out', style({ [direction]: '100%'}))
            ], optional),
            query(':enter', [
                animate('600ms ease-in-out', style({ [direction]: '0%'}))
        ])
    ])
    ]

这是整个 ts 文件

import {
    trigger,
    transition,
    style,
    query,
    group,
    animateChild,
    animate,
    keyframes
} from '@angular/animations'

export const slider = 
    trigger('routeAnimations' , [
        transition('* => isRight', slideTo('right') )
    ]);


function slideTo(direction) {
    const optional = {optional : true}
    return [
        query(':enter, :leave', [
            style({
                position: 'absolute',
                top:0,
                [direction]: 0,
                width: '100%'
                
            })
        ], optional),
        query(':enter',[
            style({ [direction]: '-100%' })
        ]),
        group([        
            query(':leave',[
                animate('600ms ease-in-out', style({ [direction]: '100%'}))
            ], optional),
            query(':enter', [
                animate('600ms ease-in-out', style({ [direction]: '0%'}))
        ])
    ])
    ]
}

app.component.html

<main [@routeAnimations]="prepareRoute(outlet)" class="content">
    <router-outlet #outlet="outlet"></router-outlet>
</main>

应用程序路由.module.ts

const routes: Routes = [
  {path: 'login', component: LoginComponent},
  {path: 'equipment', component: EquipmentComponent, data: {animation: 'isRight'}},
  {path: '', component: MainformComponent,canActivate:[AuthGuard]}
];

标签： javascript

解决方案

[direction]是一个变量。它是动态的。调用slideTo(margin)将选择margin样式对象并设置其值。你也可以调用元素slideTo(right)，position: absolute这是作者在函数中所做的trigger。这取决于你想要做什么。这就是您可以在对象中选择键值对的方法，而无需提前明确知道键的名称。

推荐阅读