Javascript addEventListener出现问题（“transitionend”，函数，true）

我正在使用css3和javascript编写一个简单的函数来实现恒定效果，但我没有让它正常工作。addEventListener（）与transitionend参数无关。这是我的密码

首先我调用函数：

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

功能是：

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

}

最后是updateTransition（）函数：

    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;
}

正如您所看到的，我添加了一个console.log来查看发生了什么，控制台几乎立即给出“tipsVi2”和“tipsVi”，因此动画没有完成

css代码如下所示：

.tipsVi{
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: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;  }

---

好的，我已经解决了更改代码的问题，我选择了纯CSS解决方案，尽管我使用Javascript来提高性能

因此，首先我将CSS代码更改为：

    .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;
      }
    }

关键帧为我提供了一个带有循环的恒定动画，因此对我来说更简单。但我只是想在按下按钮时显示动画，所以我这样做了：

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;  
    }
}

这可能看起来有点复杂，但相当简单，一个按钮调用我的

tipsVi（）

函数如下

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

}

瞧，当

div

产生

fadeIn

效果时，它开始上下波动，当然CPU使用率会上升，所以当我再次按下按钮隐藏

div

时，我会还原css以减少CPU使用率并提高性能

---

我希望这能帮助像我这样的人：）

你能告诉我更多你想做什么吗？看起来你想在hover上有一个反弹效果，但不清楚。是的，我试着做一个反弹效果，用帮助信息显示一些隐藏的div，我试着让它看起来像漂浮在内容之上。为了使其循环，我在这里看到，使用addEventListener我可以，但它不起作用，控制台向我显示它没有等待过渡结束，因此我使用css关键帧：）

.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;