Угловая задержка анимации устанавливает отображение: блок до запуска анимации

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» формы установлена ​​на 5 с, она сразу занимает все пространство, таким образом нажимая кнопку вокруг.