Делаю директиву

364

03 ноября 2017, 12:53

Делаю директиву которая должна слушать ивент наведении мышки на элемент и если мышка наведена и не шевелиться 5 сек должна присвоить элементу класс moved который будет делать анимацию... подскажите что делаю не так?

import { Directive, HostBinding, HostListener } from "@angular/core";

@Directive({
    selector: '[appMove]'
})
export class MoveDirective{
    @HostBinding('class.moved') isMoved = false;
    @HostListener('mousemove') onMouseMove(){
        setTimeout(function () {
            @HostListener('mouseenter') onmouseenter () {
                this.isMoved = true;
            }
            @HostListener('mouseleave') onmouseleave () {
                this.isMoved = false;
            }
        }, 5000)
    }
}

CSS:

@-webkit-keyframes moved {
  15% {
    -webkit-transform: translateX(9px);
    transform: translateX(9px);
  }
  30% {
    -webkit-transform: translateX(-9px);
    transform: translateX(-9px);
  }
  40% {
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
  }
  50% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  65% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
@keyframes moved {
  15% {
    -webkit-transform: translateX(9px);
    transform: translateX(9px);
  }
  30% {
    -webkit-transform: translateX(-9px);
    transform: translateX(-9px);
  }
  40% {
    -webkit-transform: translateX(6px);
    transform: translateX(6px);
  }
  50% {
    -webkit-transform: translateX(-6px);
    transform: translateX(-6px);
  }
  65% {
    -webkit-transform: translateX(3px);
    transform: translateX(3px);
  }
  100% {
    -webkit-transform: translateX(0);
    transform: translateX(0);
  }
}
.moved:hover{
  -webkit-animation: swing 0.6s ease;
  animation: swing 0.6s ease;
   -webkit-animation-iteration-count: 1;
   animation-iteration-count: 1;
   -webkit-box-shadow: 0px 1px 11px 0px rgba(50, 50, 50, 0.75);
   -moz-box-shadow:    0px 1px 11px 0px rgba(50, 50, 50, 0.75);
   box-shadow:         0px 1px 11px 0px rgba(50, 50, 50, 0.75);
   transform: scale(1.05);
   z-index: 10;
   transition: .5s all;
}

Answer 1

В текущем коде идет ошибочная попытка определить поля класса внутри коллбэка функции setTimeout.

Вместо этого их нужно сделать такими же полями как и onMouseMove.

Далее задача сводится к тому, чтобы по событию mouseenter запустить таймер, по истечении которого присвоить полю isMoved значение true

по событию mouseleave - остановить таймер и присвоить полю isMoved значение false

по событию mousemove - перезапустить таймер, и опционально присвоить полю isMoved значение false.

Как это может выглядеть в коде:

export class MoveDirective{
    private timerId:number;
    @HostBinding('class.moved') isMoved = false;
    @HostListener('mouseenter') onmouseenter () {
        clearTimeout(this.timerId);
        this.timerId = setTimeout(() => {
            this.isMoved = true
        }, 5000)
    }
    @HostListener('mouseleave') onmouseleave () {
        clearTimeout(this.timerId);
        this.isMoved = false;
    }
    @HostListener('mousemove') onMouseMove(){
        clearTimeout(this.timerId);
        this.isMoved = false; // если при движении надо сбросить класс
        this.timerId = setTimeout(() => {
            this.isMoved = true
        }, 5000)
    }
}