Angular 当我在子元素上使用相同的角度动画时，它不会'；行不通

当我在父元素和子元素上使用相同的旋转动画时，它总是在父元素上工作，但第一次在子元素上不工作，但第二次工作

如果我只有一个元素，它就会工作。下面是一个例子

---

我不是动画方面的专家，但似乎您必须将动画分为两部分。一个用于轨道，一个用于行星

因此，我尝试了一下，并分别创建了两个不同的

trigger

函数

只有一个触发器函数，就像它按顺序执行一样。完成第一项后，将对第二项进行评估

@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ],
   animations: [
    trigger('rotatedState', [
      transition('void => *', [
        animate('{{rotationSpeed}} linear', style({
          transform: 'rotate(360deg)'
        }))
      ]),
      
    ]),
    trigger('rotatedState1', [
      transition('rotated => *', [
        animate('{{rotationSpeed}} linear', style({
          transform: 'rotate(360deg)'
        }))
      ])
    ])
  ]
})

还有HTML

行星

Angular有一个介绍部分：您正在寻找