角动画延迟集display：block在动画开始之前

Question

我正在创建角度为7的动画，并且遇到按钮和表单的问题。在DOM中，它们生活在完全相同的位置，一个最初显示（按钮），另一个隐藏（窗体）。 在状态从“选择”更改为“登录”时，该按钮应消失，然后出现登录表单。

问题：即使在开始出现出现形式的动画之前，显示模式仍设置为“阻止”，这会导致按钮被向上按下。

即使出现动画延迟，如何防止这种立即出现？     

// BUTTON
trigger('loginButton', [
  state('select', style({
    opacity: 1,
    display: 'block'

  })),
  state('login', style({
    opacity: 0,
    display: 'none'
  })),
  state('signup', style({
    opacity: 0
  })),
  transition('select => login', [
    sequence([
      animate('0.3s ease', style({
        transform: 'translateX(-50%)'
      })),
      animate('0.3s ease', style({
        opacity: 0
      }))
    ])
  ]),

]),


// LOGIN FORM
trigger('loginForm', [
  state('select', style({
    display: 'none',
  })),
  state('login', style({
    display: 'block',
    opacity: 1,
  })),
  state('signup', style({
    display: 'none',
    opacity: 0,
  })),
  transition('select => login', [
    animate('5s 5s ease')
  ]),
]),

即使表单的“ select => login”动画的延迟设置为5s，它也立即占据了整个空间，因此按下了按钮。