Angular Animation Side Effect

Question

Animation's query() "is used to find one or more inner elements within the current element that is being animated" according to the docs. Is there a way to animate a sibling or outer element? I would like to hide another element before an animation begins, animate the object, and then show the other element again:

transition('void => someState', sequence([
    query(':self ~ @siblingElement',
        animate('300ms ease-in-out', style({
            opacity: '0'
        })), { optional: true }),
    style({
        opacity: '0',
        transform: 'rotateX(90deg)'
    }),
    query(':self', stagger('100ms', animate('200ms ease-in-out'))),
    query(':self ~ @siblingElement',
        animate('300ms 3s ease-in-out', style('*')), { optional: true }),
]))

I tried CSS sibling selectors ~ and + , but they do not work.

Answer 1

I'm afraid not. You'll have to move the animation up one level.