В поисках Angular 6 Hover Animation

Question

Я ищу анимацию Angular 6, точно такую ​​же, как этот код (при наведении курсора).

Я прикрепил ссылку jsfiddle здесь. Я только что попробовал в Angular 6. Но Я получаю сообщение "Невозможно прочитать свойство animate" со значением NULL "Невозможно прочитать свойство 'hover', равное нулю,

http://jsfiddle.net/gaby/xmAvh/

this.nativeElement.querySelector('#hover1').hover(() => {
      this.amount = '+=10';
      this.scroll();
    }, () => {
      this.amount = '';
    });

 this.nativeElement.querySelector('#container').animate({scrollTop: this.amount}, 100, 'linear', () => {
      if (this.amount !== '') {
        this.scroll();
      }
    });

<div id="hover"> HOVER ME </div>

<div id="container">resemblance reflected in some of the bird's names. It was 30 cm (12 in) long and larger and more robust than any other blue pigeon species. It could raise its hackles into a ruff, which it used for display. Its call sounded like "barf barf" and it also made a cooing noise. It fed on fruits, nuts, and molluscs, and was once widespread in the forests of Mauritius. The bird was first mentioned in 
</div>
<div id="hover2"> HOVER ME </div>

Ваша помощь приветствуется !!

Answer 1

Я думаю, что вы получаете ошибку, потому что элементы не созданы, вам нужно поместить код в ngAfterViewInit(), так как этот метод вызывается после того, как все элементы сделаны.