jquery - 伪元素并监听过渡到结束

Question

我有一个导航，其中包含伪元素作为图标 (a:before)。

<ul>
  <li><a href="#">click me</a></li>
  <li><a href="#">click me</a></li>
</ul>
<style>
  /* that's a placeholder for the icon */
  a:before {
    content : 'X';
    width:1em;height:1em;line-height:1em;font-size:1em;
    border-radius : 50%; background-color : blue;
  }
</style>

如果我点击一个 anchor ，我希望这个图标旋转。我正在通过 jQuery .on('click') 并添加具有 CSS-Transition 的类来完成此操作。这很好用。

看看这个 fiddle ，它很简单:

https://jsfiddle.net/14yet0ts/1/

...

问题

但是，在很短的时间后(我在我的 jsFiddle 中使用 setTimeout() 来模拟 ajax 请求)，我希望 CSS-Transition 在完成后结束。

我已经看到，jQuery 可以监听过渡结束事件，但我无法监听它，因为过渡是在标记的伪元素上设置的，无法通过 DOM 访问。

是否有可能在不更改 HTML 的情况下收听过渡到结束？

主要是脚本的这一部分不起作用:

$('a:before', el).one('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(){
    alert('2: transition ended, remove class loading');
    el.removeClass('loading');
}); 

干杯

Answer 1

首先，您使用的不是过渡，而是动画。因此，您需要使用与动画相关的事件。在这种情况下，您需要动画迭代。

最后，你不能监听伪元素本身的事件。但是，事件会冒泡到 a，因此您可以在那里收听:

function removeTransition(el) {
    //  this does not work!
    $('a', el).one('animationiteration webkitAnimationIteration oanimationiteration MSAnimationIteration', function(){
        el.removeClass('loading');
    });    
}

您还需要删除警报，因为它们会妨碍平稳过渡

https://jsfiddle.net/14yet0ts/3/

---

另一个与所提出的确切问题无关的注意事项，您应该更新您的代码以仅从单击的 li 中删除类，否则如果同时播放多个动画，您将遇到问题。

$('a').on('click', function(e) {
    var wait = 1000 + Math.floor(Math.random()*2)*1000;

    // el is the exact `li`, not all loading `li` elements
    var el = $(this).closest('li').addClass('loading');
    e.preventDefault();

    setTimeout(function() {
        removeTransition(el);
    }, wait);
});

https://jsfiddle.net/14yet0ts/4/