javascript transitionEnd не работает через некоторое время с помощью setInterval - PullRequest
Новая
       9

javascript transitionEnd не работает через некоторое время с помощью setInterval

0 голосов
/ 23 октября 2019

Я использовал setInterval для циклического перехода, сначала он был нормальным, но через некоторое время он будет нечетным

Я думаю, что иногда это не вызывает функцию transitionEnd, но я не знаю, почему это мойскрипка

https://jsfiddle.net/Ld1b0shj/

Мой код: HTML 

<div id="aaa"></div>

CSS 

div {
  width: 300px;
  height: 300px;
  background: blue;
  display: none;
}

.box-enter {
  opacity: 0;
}

.box-trans {
  opacity: 1;
  transition: opacity 0.2s linear;
}

.box-leave {
  opacity: 0;
}

Javasript: 

const tt = {
  $boxToast: $('#aaa'),
  active: false,
  go() {
    const obj = this;
    obj.$boxToast.removeClass('box-enter box-trans box-leave');
    obj.active = true;

    function enter() {
      obj.$boxToast.on('transitionend webkitTransitionEnd oTransitionEnd', boxEnter);
      obj.$boxToast.addClass('box-enter').show().delay(100).queue(function() {
        obj.$boxToast.addClass('box-trans').dequeue();

        setTimeout(function() {
          obj.$boxToast.on('transitionend webkitTransitionEnd oTransitionEnd', boxLeave);
          obj.$boxToast.addClass('box-leave');
        }, 1000)
      });
    }

    function boxEnter() {
      obj.$boxToast.removeClass('box-enter');
      obj.$boxToast.off('transitionend webkitTransitionEnd oTransitionEnd', boxEnter);
    }

    function boxLeave() {
      obj.$boxToast.removeClass('box-leave box-trans');
      obj.$boxToast.hide();
      obj.active = false;
      obj.$boxToast.off('transitionend webkitTransitionEnd oTransitionEnd', boxLeave);
    }
    enter();
  }
}

setInterval(function(){
  tt.go();
}, 5000)

Спасибо всем

Редактировать:

Это странный GIF URL https://upload.cc/i1/2019/10/23/mj6gbu.gif

И вариант дом https://upload.cc/i1/2019/10/23/TNzj0o.gif

...