Question

在下面的示例中，在Angular 5中，如何在页面加载时实现<h1>和<p>的交错动画？

目标：加载页面后，淡入标题，然后淡入简介。

HTML：

<div class="header" [@header]>
    <h1>Headline</h1>
    <p>Introduction</p>
</div>

TS：

trigger( 'header', [
    transition( ':enter', [
        query( '*', stagger( '300ms', [
              animate( '.3s ease-in', keyframes([
                style( { opacity: 0, transform: 'translateY(-15%)', offset: 0}),
                style( { opacity: 1, transform: 'translateY(0)', offset: 1}),
              ]))
          ]), { optional: true} ),
      ] )
  ] ),

按原样，问题似乎是<h1>和<p>默认以opacity的{{1}}开头。因此似乎正在发生的事情是，它们先淡出然后再淡入。

如果我使用css手动将其1设置为opacity，则动画的开头似乎可以正常工作，但是动画结束后它们就会在页面中隐藏起来。

我需要做什么才能使其按需工作？

Answer 1

我认为最好的情况是设置初始样式，然后通过交错动画显示

trigger('header', [
    transition(':enter', [
      query('*', style({ opacity: 0, transform: 'translateY(-15%)' })),
      query('*', stagger('300ms', [
        animate('.3s ease-in', style({ opacity: 1, transform: 'translateY(0)'}))
        ]))
      ])
    ])

页面加载时角动画淡入

1 个答案: