CODEWITHSUNDEEP
angulartypescriptangular6
Udaya Vani
Udaya Vani

Reputation: 515

Looking for Angular 6 Hover Animation

I am looking for Angular 6 animation exactly similar this code (hover scrolling).

I have attached the jsfiddle link here. I just tried in Angular 6. But I am getting "Cannot read property 'animate' of null, "Cannot read property 'hover' of null,

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>

Your help is appreciated!!

Upvotes: 0

Views: 443

Answers (1)

Vidhi Bhatt
Vidhi Bhatt

Reputation: 11

I think you are getting the error because the elements are not made, you need to put the code in ngAfterViewInit() as this method is called once all the elements are made.

Upvotes: 1

Related Questions