Angular 4: показать наложение при наведении курсора мыши с анимацией, основанной на направлении мыши

Question

Angular 4: показать наложение при наведении курсора мыши с анимацией, основанной на направлении мыши

Я хотел бы получить это в компоненте Angular4 без использования Jquery.

Мне нужно показать наложение div с анимацией, основанной на направлении мыши, как mouseover, так и mouseout. Я попытался переписать пример кода в моем компоненте, но я не могу получить ширину и высоту события.цель.

Мой div:

<div (mouseover)='showOverlay($event)'>div to hover</div>

Компонент:

export class MyComponent implements OnInit {



    constructor(private _el: ElementRef) {

    }



    ngOnInit() {



    }



    showOverlay(e) {

        const target = e.target;

        console.log(target._el.nativeElement); // Returns undefined

        console.log(target.nativeElement); // Returns undefined

        console.log(target.nativeElement.width); // Error

        console.log(target._el.nativeElement.width); // Error

    }

}

Есть идеи?

Спасибо

553 2

angular

2 ответов:

Comments

Ничего не найдено.

Sasxa · Accepted Answer · 2017-08-29 12:52:14

Мне нравится этот эффект, поэтому я сделал компонент с угловой анимацией: https://stackblitz.com/edit/angular-fftwpg .

import { Component, HostListener } from '@angular/core';
import { AnimationEvent } from '@angular/animations';
import {
  trigger,
  state,
  style,
  animate,
  transition
} from '@angular/animations';

const animateIn = '0.15s ease-in';
const animateOut = '0.25s ease-out';

const styleIdle = { transform: 'translate3d(0, 0, 0)' };
const styleTop = { transform: 'translate3d(0, -100%, 0)' };
const styleRight = { transform: 'translate3d(100%, 0, 0)' };
const styleBottom = { transform: 'translate3d(0, 100%, 0)' };
const styleLeft = { transform: 'translate3d(-100%, 0, 0)' };

export const HoverContainerAnimations = [
  trigger('hover', [
    state('*', style(styleIdle)),
    transition('* => in-left', [
      style(styleLeft), animate(animateIn)
    ]),
    transition('* => in-right', [
      style(styleRight), animate(animateIn)
    ]),
    transition('* => in-top', [
      style(styleTop), animate(animateIn)
    ]),
    transition('* => in-bottom', [
      style(styleBottom), animate(animateIn)
    ]),
    transition('* => out-right', [
      animate(animateOut, style(styleRight))
    ]),
    transition('* => out-left', [
      animate(animateOut, style(styleLeft))
    ]),
    transition('* => out-top', [
      animate(animateOut, style(styleTop))
    ]),
    transition('* => out-bottom', [
      animate(animateOut, style(styleBottom))
    ]),
  ])
];


@Component({
  // tslint:disable-next-line:component-selector
  selector: 'hover-container',
  template: `
    <ng-content></ng-content>
    <div class="overlay" 
        *ngIf="state" 
        [@hover]="state" 
        (@hover.done)="onDone($event)">
      <ng-content select="[overlay]"></ng-content>
    </div>`,
  styleUrls: ['./hover-container.component.css'],
  animations: HoverContainerAnimations,
})
export class HoverContainerComponent {
  state;

  @HostListener('mouseenter', ['$event'])
  @HostListener('mouseleave', ['$event'])
  onHover(event: MouseEvent) {
    const direction = event.type === 'mouseenter' ? 'in' : 'out';
    const host = event.target as HTMLElement;
    const w = host.offsetWidth;
    const h = host.offsetHeight;

    const x = (event.pageX - host.offsetLeft - (w / 2)) * (w > h ? (h / w) : 1);
    const y = (event.pageY - host.offsetTop - (h / 2)) * (h > w ? (w / h) : 1);
    const states = ['top', 'right', 'bottom', 'left'];
    const side = Math.round((((Math.atan2(y, x) * (180 / Math.PI)) + 180) / 90) + 3) % 4;
    this.state = `${direction}-${states[side]}`;
  }

  onDone(event: AnimationEvent) {
    this.state = event.toState.startsWith('out-') ? null : this.state;
  }

}

Vega · Accepted Answer · 2017-08-28 17:31:03

Я думаю, что было бы лучше написать Directive, чтобы вы могли "повторно использовать" его для каждого <div>.

Директива:
@Directive({
    selector: '[over]'
})
export class OverDirective {
    constructor(private elementRef: ElementRef) {
    }

    @HostListener('mouseover', ['$event'])
    onOver(event: MouseEvent): void {
        console.log(this.elementRef.nativeElement.offsetHeight)
    }
}
HTML :
<div over id="myDiv">div to hover</div>
Если вы все еще хотите получить доступ к элементу из компонента через переменную шаблона:

HTML
<div id="div2" (mouseover)="onMouseOver($event, toto)" #toto>an other div to hover</div>
Typescript
onMouseOver(event, elem)
  {
    console.log(elem.offsetHeight);
 }
Плунжер