转换完成后运行功能，即点击事件引起的。 （事件中的事件）

Question

单击按钮后，块将获得带有转换的.red类。在转换完成后我需要运行一个func。这是我的代码：

<button>PRESS</button>
<div class="test"></div>

.test {
  background-color: grey;
  height: 250px;
}
.red {
   background: red;
   transition: all 5s ease;
}

const btn = document.querySelector('button'),
      block = document.querySelector('.test');

btn.addEventListener('click', function() {
  block.classList.add('red');
  foo();
})

function foo() {
  block.addEventListener('webkitTransitionEnd otransitionend oTransitionEnd 
  msTransitionEnd transitionend', function() {
  block.classList.remove('red');
 })
}

https://codepen.io/MrCodeBlog/pen/xpaNQZ?editors=1010

Answer 1

您无法一次性传递所有事件，因为它不起作用。您需要单独添加每个。至FF如下：

function foo() {
    block.addEventListener('transitionend', function() {
    block.classList.remove('red');
  })
}

这个更新的小提琴完全适用于Mozilla：https://codepen.io/anon/pen/aEagjy?editors=1010

Answer 2

您似乎需要setTimeout()。使用setTimeout，您可以在一段时间后运行一段代码。在您的示例中，您只需将foo()包裹在setTimeout()中并使用5000毫秒。

btn.addEventListener('click', function() {
  block.classList.add('red');
  // The number is in ms so 5000ms is equal to the 5s it
  // takes for your CSS transition to finish.
  setTimeout(foo, 5000);
})

Answer 3

事件类型必须是每个事件的字符串。所以你可以这样做。

function foo() {
  [
    'webkitTransitionEnd',
    'otransitionend',
    'oTransitionEnd',
    'msTransitionEnd',
    'transitionend',
  ].forEach(function(transition) {
    block.addEventListener(transition, function() {
      block.classList.remove('red');
    });
  });
}

小提琴：https://codepen.io/dartist21/pen/MrqNWJ