Angular：group（）函数不会并行运行动画，会中断动画流

Question

我试图用角度动画实现this login form用于练习目的。

我希望十字架在圆圈移动到中间时旋转。所以我需要同时进行运动和交叉旋转。

我尝试为同一个变量触发的十字架创建第二个动画。第二个动画没有渲染，因为它是一个innerElement，父动画显然阻止了这个。然后我尝试在动画中创建一个组，其中运动和旋转应该平行动画。但这导致以下动画不再“动画”，只是跳到动画结果。

我创建了一个stackblitz，其中整个动画是link

这是动画，它如何在没有旋转的情况下正常工作。评论部分是我试图做的而不是第一个animate功能。

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

当我将动画放在一个组中时，它不应该影响它之后的动画，而是并行运行的东西，但不知何故它确实如此。我使用组错吗？或者这是已知的行为

编辑：我解决了这个问题，通过不使用多个animate()函数，而是通过动画中使用keyframes()的单个动画函数，它有多个步骤。组中没有一系列动画功能以某种方式解决了这个问题。

Answer 1

我通过[ngClass]将你的stackblitz分叉到make the change ......

在login.component.css中：

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

在login.component.html中：

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