css - Angular:group() 函数不会并行运行动画，会扰乱动画流

Question

我正在尝试实现 this login form带有用于练习目的的 Angular 动画。

我想让十字在圆圈移动到中间的同时旋转。所以我需要同时发生移动和交叉旋转。

我尝试为由同一变量触发的十字创建第二个动画。第二个动画没有被渲染，因为它是一个 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() 函数，而是使用一个具有多个步骤的动画函数 动画中的关键帧()。组中没有一系列动画函数以某种方式解决了这个问题。

Answer 1

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

在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>