时间戳

首页 > 解决方案 > 当我在子元素上使用相同的角度动画时，它不起作用

angular - 当我在子元素上使用相同的角度动画时，它不起作用

问题描述

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

如果我只有一个元素，它会起作用。这是示例

https://stackblitz.com/edit/angular-ivy-g9dvv3

标签： angularanimationangular-animations

解决方案

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

因此，我试了一下，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

<div class="planet-orbit" 
      [@rotatedState]='{value: planet.orbitState, params:{rotationSpeed: planet.orbitSpeed}}'
      (@rotatedState.done)="onAnimationDone('orbitState')" >

  <div  class="planet" 
        [@rotatedState1]='{value: planet.state, params:{rotationSpeed: planet.spinSpeed}}'
        (@rotatedState1.done)="onAnimationDone('state')">
          <span>Planet</span>
  </div>

</div>

推荐阅读