Angular: компоненты исчезают, когда я добавляю анимацию к компонентам

Question

Так что я надеялся добавить анимацию на мою веб-страницу.Сначала я пробовал сложные, но это не сработало (я очень незнаком с угловыми анимациями).Теперь я попробовал базовый, но даже сейчас он не работает.

Я добавил базовую анимацию к компоненту.Когда элемент попадает на страницу, я хочу, чтобы непрозрачность изменялась с 0 на 1 в течение периода времени 2 секунды.Когда у меня есть свойство animation в моем декораторе компонентов, мой шаблон не отображается в браузере (также нет ошибок в консоли).Когда я удаляю анимацию, она работает как раньше и показывает мой компонент (без анимации, конечно)

Может кто-нибудь увидеть, где я не прав?

Компонент декоратора

@Component({
    selector: 'find-locals',
    styleUrls: ['find-locals.component.css'],
    templateUrl: 'find-locals.component.html',
  animations: [
    trigger('tijl', [
      state('start', style({
        opacity: 0
      })),
      transition(':enter', [
        animate(2000)
      ])
    ])
  ]
})

Шаблон

<div @tijl class="header-box header-box--left">
                <h3 class="profileSection__data">Content</h3>
              </div>

Answer 1

Попробуйте вот так

animations: [
    trigger('tijl', [
      transition(':enter', [
        style({ opacity: '0' }),
        animate(2000)
      ])
    ])
  ]

анимация вернет стиль в течение 2 секунд

демонстрация стекаблиц

Answer 2

Мне удалось заставить его работать со следующим:

  animations: [
    trigger('tijl', [
      state('start', style({
        opacity: 0
      })),
      transition(':enter', [
        style({ opacity: '0' }),
        animate(2000)
      ])
    ])
  ]

Вот демонстрация Stackblitz