CODEWITHSUNDEEP
angularangular-animations
Thomas Adams
Thomas Adams

Reputation: 13

Angular animation delay not executed

I have set up router based animations in angular 10, however I cannot make an animation delay working.

Here my code:

const simpleCommonStyle = style({
    position: 'absolute', height: '100vh', width: '100%',
    transformStyle: 'preserve-3d'
});


const flipInLeft = [
    style({transformOrigin: '50% 50%', animationDelay: '.5s', animationFillMode: 'both'}),
    animate('.5s ease-in', keyframes([
        style({animationDelay: '.5s', transform: 'translateZ(-1000px) rotateY(-90deg)', opacity: 0.2, offset: 0}),
        style({animationDelay: '.5s', transform: 'translateZ(0px) rotateY(0deg)', opacity: 1, offset: 1})
    ]))
];

const flipOutRight = [
    style({transformOrigin: '50% 50%', animationFillMode: 'both'}),
    animate('.5s ease-in', keyframes([
        style({opacity: 1, offset: 0}),
        style({transform: 'translateZ(-1000px) rotateY(90deg)', opacity: 0.2, offset: 1})
    ]))
];

simpleEnterAnimation = flipInLeft;
simpleLeaveAnimation = flipOutRight;


const pageTransitionAnimation = (stateChangeExpr: string,
                                 commonStyle: AnimationStyleMetadata,
                                 enterAnimation: AnimationMetadata | AnimationMetadata[] | AnimationAnimateMetadata,
                                 leaveAnimation: AnimationMetadata | AnimationMetadata[] | AnimationAnimateMetadata
):
    AnimationTransitionMetadata => {
    return transition(stateChangeExpr, [
        group([query(':enter, :leave',
            commonStyle,
            {optional: true}),
            group([
                query(':leave', leaveAnimation, {optional: false}),
                query(':enter', enterAnimation, {optional: false})
            ])
        ])
    ]);
};

export const pageTransitions =
    trigger('pageTransitions', [
        pageTransitionAnimation('Home => *', simpleCommonStyle, simpleEnterAnimation, simpleLeaveAnimation),
        ... (same for all routes) ...
    ]);

I did try setting the animation delay in the styles itself, in the timings of Angular's animate function, as delay parameter in group options and as a stagger around the entering animation to no avail, best I can get is that both animations start simultaneously, in some cases the leaving animation is even simply skipped.

I am rather new to Angular animations, so I'm not sure if I set up all moving parts the right way, so every hint would be highly appreciated.

Upvotes: 1

Views: 653

Answers (1)

Thomas Adams
Thomas Adams

Reputation: 13

Ok i found the mistake by myself, instead of :

transition(stateChangeExpr, [group(......)])

i used now

transition(stateChangeExpr, group(...))

and now the delay is working.

Upvotes: 0

Related Questions