what does [direction] mean here in this snippet

Question

I copied a code where the component slides from right or left to center but i don't know how the parameter is used. i dont know of any [direction]: 0 property in CSS

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%'}))
        ])
    ])
    ]

Here's the whole ts file

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>

app-routing.module.ts

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

It looks to me like it's setting the base for animation. Since lower you have the pseudo elements of `enter` and `leave` with animation easing of `0%` and `100%` respectively .. But without the entire code snippet it's hard to say for sure ... — Zak, Jun 09 '20 at 23:49
thanks for the response. just updated the question with the related code — suahdad, Jun 09 '20 at 23:56

score 0 · Answer 1 · answered Jun 09 '20 at 23:55

0

[direction] is a variable. It is dynamic. Calling slideTo(margin) will select margin in the style object and set its value. You might also call slideTo(right) for position: absolute elements, which is what the author is doing in the trigger function. It depends what you're trying to do. This is how you can choose key-value pairs in an object without explicitly knowing the name of the key ahead of time.

answered Jun 09 '20 at 23:55

Seth Lutske

9,154
5
29
78

Great, so that also explains why he used 'right' as the parameter, he means he's controlling the right property – suahdad Jun 10 '20 at 00:02

score 0 · Answer 2 · answered Jun 10 '20 at 00:05

The function slideTo is called in your code snippet as slideTo('right').

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

Which makes it clear that slideTo is meant to be called with the string literal 'right' or 'left'.

So if you call slideTo with 'left' it is meant to set the CSS property left on the absolute positioned element. [direction]: 0 just sets the key name dynamically as left: 0 or right: 0 based on the argument passed.

what does [direction] mean here in this snippet

2 Answers2