Quería intentar hacer la versión angular de un movimiento de seguimiento del cursor, pero el movimiento del mouse no es fluido, ¿cómo soluciono esto y cuál es el motivo?: https://stackoverflow.com/a/48756322/5152892
Mi intento angular: https://stackblitz.com/edit/angular-vnx9yd?file=src/app/app.component.ts
export class AppComponent { name = 'Angular'; constructor( private el: ElementRef ) {} get tooltip() { return this.el.nativeElement.querySelector('.sites-circle'); } enter(source: string) { this.tooltip.classList.add('show'); } move(e: { pageX: number; pageY: number }) { const tooltipStyle = this.tooltip.style; tooltipStyle.left = e.pageX + 'px'; tooltipStyle.top = e.pageY + 'px'; } leave() { this.tooltip.classList.remove('show'); } }CSS:
p { font-family: Lato; } .mouse-circle { position: absolute; border: solid 1px #ccc; width: 20px; height: 20px; border-radius: 50%; background: white; } .show { opacity: 1 !important; } .sites-circle { z-index: 500; position: absolute; border: solid 1px #ccc; width: 20px; height: 20px; border-radius: 50%; background: blue; pointer-events: none; transition-duration: 200ms; transition-timing-function: ease-out; transform: translate(-50%, -50%); opacity: 0; } .wrapper { height: 100vh; width: 100%; }HTML:
<div class="wrapper" (mouseenter)="enter()" (mousemove)="move($event)" (mouseleave)="leave()" > <p>Start editing to see some magic happen :)</p> <div class="sites-circle">hello</div> </div>a veces es mejor usar el operador fromEvent rxjs para administrar el movimiento del mouse. Esto permite utilizar diferentes operadores para no emitir constantemente el evento.
Usa Viewchild para obtener los elementos.
<div #mydiv class="show" class="wrapper" (mouseenter)="enter()" (mouseleave)="leave()" > <div #tooltip class="sites-circle">hello</div> </div> @ViewChild('mydiv',{static:true}) div:ElementRef @ViewChild('tooltip',{static:true}) tooltipEl:ElementRefDespués
ngOnInit() { this.subscription=fromEvent(this.div.nativeElement,'mousemove').pipe( throttleTime(200,asyncScheduler,{ trailing: true })) .subscribe((e:any)=>{ const tooltipStyle = this.tooltip.style; tooltipStyle.left = e.pageX + 'px'; tooltipStyle.top = e.pageY + 'px'; this.cont++; }) } ngOnDestroy() { this.subscription.unsubscribe() }En el ejemplo (ver stackblitz ) uso throttleTime para no emitir un nuevo evento hasta 200 milisegundos (puedes cambiar a 100 o 150)