页面加载时角度动画淡入答案

【问题标题】：Angular animation fade-in on page-load页面加载时角度动画淡入
【发布时间】：2018-07-31 18:54:57
【问题描述】：

在 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 手动将他们的 opacity 设置为 0，动画的开始似乎可以正常工作，但一旦动画结束，它们就会从页面中隐藏。

我需要做什么才能让它按预期工作？

【问题讨论】：

在您的animate 之前写上style({ opacity: 0 })。它定义了动画开始之前的样式。

标签： angular angular5 angular-animations

【解决方案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)'}))
        ]))
      ])
    ])

【讨论】：