Problem with addEventListener("transitionend", function, true)

i'm writing a simple function to make a constant effect using css3 and javascript but I don't get it work properly. The addEventListener() is not respecting the transitionend parameter. Here is my code.

first I call the function:

$('.tipsVi2, .tipsVi').mouseenter(function(){
            var e=$(this).attr('id');
            animacion(e);
            });

the function is:

function animacion(e) {
var el = updateTransition(e);
    el.addEventListener("transitionend", updateTransition(e), true);

}

and finally the updateTransition() function:

    function updateTransition(e) {  
var el = document.querySelector('#'+e);
  if (el.className=='tipsVi') {
    console.log('tipsVi2');
    el.className = "tipsVi2";
  } else {
    console.log('tipsVi');
    el = document.querySelector('div.tipsVi2');
    el.className = "tipsVi";
  }

  return el;
}

as you can see I added a console.log to see what is happening and the console gives me "tipsVi2" and then "tipsVi" almost instantly so the animation doesn't complete.

The css code is this:

.tipsVi{
position:absolute;
display:none;
z-index:3000;
cursor:default;
-moz-transition-property:margin;
-moz-transit开发者_运维技巧ion-duration: 500ms;
-webkit-transition-property: margin;
-webkit-transition-duration: 500ms;
-o-transition-property: margin;
-o-transition-duration: 500ms;
margin:0;}
.tipsVi2 {
position:absolute;
display:none;
z-index:3000;
cursor:default;
-moz-transition-property:margin;
-moz-transition-duration: 500ms;
-webkit-transition-property: margin;
-webkit-transition-duration: 500ms;
-o-transition-property: margin;
-o-transition-duration: 500ms;
margin:-5px 0 0 0;  }

OK I've solved the problem changing my code, I choosed for a pure CSS solution, although I used Javascript to improve performance.

So first I changed my CSS code to this:

    .tipsVi{
    position:absolute;
    z-index:3000;
    cursor:default;
    display:none;
    color:#3d3d3d;
    font-size:30px;
}

 @-moz-keyframes slidein {
      from {
        margin-top:0;
      }



      50% {
          margin-top:-4px;
      }

      to {
        margin-top:0;
      }
    }

    @-webkit-keyframes slidein {
      from {
        margin-top:0;
      }

      50% {
          margin-top:-4px;
      }

      to {
        margin-top:0;
      }
    }

Keyframes offer me a constant animation with a loop so that made it simpler to me. But I just wanted to show the animation when I pressed a button so I did this:

function tipsVi(){

    //Help activated, 
    if(misTips==1){
        misTips=0;
        $('.tipsVi').fadeIn(150, function(){
            var css={'position':'absolute',
                    'z-index':'3000',
                    'cursor':'default',
                    'color':'#3d3d3d',
                    'font-size':'30px',
                    '-webkit-animation-direction':'normal',
                    '-moz-animation-direction': 'normal',
                    '-webkit-animation-duration': '800ms',
                    '-moz-animation-duration': '800ms',
                    '-webkit-animation-iteration-count': 'infinite',
                    '-moz-animation-iteration-count': 'infinite',
                    '-webkit-animation-name': 'slidein',
                    '-moz-animation-name': 'slidein',
                    '-webkit-animation-timing-function': 'ease',
                    '-moz-animation-timing-function': 'ease'};
            $('.tipsVi').css(css);
            });
    }
    //Tips apagados
    else{
        console.log('desactivada');
        $('.tipsVi).fadeOut(150, function(){
            var css={'position':'absolute',
                    'z-index':'3000',
                    'cursor':'default',
                    'display':'none',
                    'color':'#3d3d3d',
                    'font-size':'30px'};
        $('.tipsVi').css(css);
            });
        misTips=1;  
    }
}

This might see a little complicated but is quite simple, a button calls my tipsVi() function like this

<button onClick="javascript: tipsVi()">Help</button>

the function has a global variable called misTips so when the flag is 0 changes the css via jQuery so it looks like this:

.tipsVi{
position:absolute;
z-index:3000;
cursor:default;
display:none;
color:#3d3d3d;
font-size:30px;
-webkit-animation-direction: normal;
-moz-animation-direction: normal;

-webkit-animation-duration: 800ms;
-moz-animation-duration: 800ms;

-webkit-animation-iteration-count: infinite;
-moz-animation-iteration-count: infinite;

-webkit-animation-name: slidein;
-moz-animation-name: slidein;

-webkit-animation-timing-function: ease;
-moz-animation-timing-function: ease;

}

and voila, when the div makes the fadeIn effect it starts going up and down, of course the CPU usage goes up so when I press the button again to hide the div, I revert the css to reduce CPU usage and improve performance.

I hope this helps somebody like me :)