当我在子元素上使用相同的角度动画时，它不起作用 [英] When I use same angular Animation on child element it doesn't work

问题描述

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

When I use same rotate animation on parent and child element, it always work on parent element but it doesn't work first time on child, but it works second time.

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

If I have only one element it works. Here is example

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

推荐答案

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

I am not an expert on the animations but it seems that you have to separate the animations into two parts. One for the orbit and one for the planet.

这样，我尝试了一下，分别创建了两个不同的 trigger 函数.

As such, I gave it a try and I created two different trigger functions respectively.

只有一个触发功能，就像按顺序执行它们一样.完成第一个操作后，将评估第二个.

Having only one trigger function, it's like it executes them sequentially. Once the first is done, the second is evaluated.

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

这篇关于当我在子元素上使用相同的角度动画时，它不起作用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！