Angular: group() function does not run animation in parallel, disrupts animation flow

Question

I was trying to implement this login form with angular animations for practice purposes.

I want the cross to rotate while the circle moves to the middle. So i need the movement and the cross rotation to happen at the same time.

I tried creating a second animation for the cross that gets triggered by the same variable. This second animation did not get rendered, since it's a innerElement and the parent animation apparently blocks this. I then tried to make a group in the animation, where the movement and the rotation should animate in parallel. But this results in the following animation to no longer "animate" and just skips to the animations result.

I've created a stackblitz where the whole animation is link

This is the animation, how it's currently working without rotation. The commented part is what i tried to do instead of the first animate function.

trigger('circle', [
      state('closed', style({
        height: `${BUTTON_WIDTH}px`,
        width: `${BUTTON_WIDTH}px`,
        background: BUTTON_COLOR,
        borderRadius: `${BUTTON_WIDTH / 2}px`,
        position: 'absolute',
        top: `${BUTTON_TOP_DISPLACEMENT}px`,
        right: `${-BUTTON_WIDTH / 2}px`
      })),
      state('open', style({
        height: '100%',
        width: '100%',
        background: BUTTON_COLOR,
        borderRadius: '0',
        position: 'absolute',
        top: '0px',
        right: '0px'
      })),
      transition('closed => open', [
        // group([
        //   animate('300ms ease-out', style({
        //     top: `calc(50% - ${BUTTON_WIDTH / 2}px)`,
        //     right: `calc(50% - ${BUTTON_WIDTH / 2}px)`
        //   })),
        //   query('a.cross', animate('300ms ease-out', style({
        //     transform: 'rotate(45deg)'
        //   })))
        // ]),
        animate('300ms ease-out', style({
          top: `calc(50% - ${BUTTON_WIDTH / 2}px)`,
          right: `calc(50% - ${BUTTON_WIDTH / 2}px)`
        })),
        animate('200ms ease-in', style({
          height: `${CONTAINER_WIDTH}px`,
          width: `${CONTAINER_WIDTH}px`,
          borderRadius: `${CONTAINER_WIDTH / 2}px`,
          position: 'absolute',
          top: `${(CONTAINER_HEIGHT - CONTAINER_WIDTH) / 2}px`,
          right: '0px'
        })),
        animate('150ms ease-out')
      ])
    ])

When i put the animations in a group it should not affect the animations after it and instead run stuff in parallel, but somehow it does. Am i using group wrong? or is this known behaviour

EDIT: I solved the problem, by not using multiple animate() functions, but rather a single animate function, that has multiple steps, by using keyframes() in the animation. Not having a sequence of animate functions in the group somehow solved the problem.

score 0 · Accepted Answer · answered Apr 06 '19 at 05:21

I forked your stackblitz to make the change via [ngClass]...

in login.component.css:

a.crossTilt{
  animation: slowRotateToCross 800ms ease-in;
  transform: rotate(45deg);
}
@keyframes slowRotateToCross{
from {  transform: rotate(0deg); }
to {  transform: rotate(45deg); }
}

in login.component.html:

  <div class="container">
    <div [@circle]="isOpen ? 'open' : 'closed'" (click)="toggle()">
      <a href="#" class="cross" [ngClass]="isOpen ? 'crossTilt' : ''" ></a> 
    </div>
  </div>

Angular: group() function does not run animation in parallel, disrupts animation flow

1 Answers1