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

Question

出于练习目的，我尝试使用 angular 动画实现 this login form。

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

我尝试为由同一变量触发的十字创建第二个动画。第二个动画没有被渲染，因为它是一个 innerElement 并且父动画显然阻止了它。然后我尝试在动画中制作一个组，其中移动和旋转应该平行动画。但这会导致以下动画不再 "animate" 并直接跳到动画结果。

我创建了一个 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>

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

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

css

angular

angular-animations

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

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

css

angular

angular-animations

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