mardi 21 avril 2015

Pseudo-Element and listening to a transition to end

I'm having a navigation which has pseudo-elements as icons (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>

If I click on an anchor, I want this icon to spin. I'm doing it via jQuery .on('click') and adding class that has a CSS-Transition. This works good.

Check out this fiddle, it's pretty simple:

http://ift.tt/1Eo1hbd

...

The Problem

However, after a short amount of time (I'm using setTimeout() in my jsFiddle to simulate an ajax request), I want the CSS-Transition to end after it has completed.

I have seen, that there are transitionend-events that jQuery can listen to, however I cannot listen to it, because the transition is set on the pseudo-element of the tag, which is not accessible via DOM.

Is there any possibility to listen to the transition to end, without changing the HTML?

Mainly it's this part of the script that's not working:

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

Cheers

Aucun commentaire:

Enregistrer un commentaire