Question

我定义的组件：

@Component ({
        selector: 'education',
        templateUrl: './education.component.html',
        styleUrls: ['./education.component.css'],
        animations: [ fadeOutAnimation ],    
        host: {
          '[style.display]': 'block',
          '[style.position]': 'fixed',
        }
    })

    export class EducationComponent {
      @HostBinding('@routeAnimation') routeAnimation = true;
    }

它的.html：

<div class="row">
        content in div
</div>
outside of div

动画：

export const fadeOutAnimation =
  trigger('routeAnimation', [
    state('*', style({
      opacity: 1,
    })),
    transition(':enter', [
      style({
        opacity: 0
      }), animate('1s', style({ opacity: 1}))
    ])
  ])

由于某种原因，动画只在不在div内部的html上执行。 <div class="row"></div>内的内容会立即显示，文字outside of div会按预期淡入。我不知道发生了什么，我如何设置div元素内容的动画？

我在桌面上使用chrome。

Version 64.0.3282.140 (Official Build) (64-bit)

Answer 1

我已经对此进行了很多实验，并没有得出正确的结论，但显然这段代码现在有效：

export const fadeOutAnimation =
  trigger('fadeOutAnimation', [
    state('*', style({
      opacity: 1,
    })),
    transition(':enter', [
      query('div', [
        style({ opacity: 0 }),
        stagger(75, animate(500, style({ opacity: 1 })))
      ]),
    ])
  ])

我希望我已经弄明白其他代码出了什么问题，但对我来说花了太长时间。

角度2路线动画未在每个元素上执行

1 个答案: