問題addEventListener（「transitionend」，函數，真）

Question

我正在寫一個簡單的函數來使用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; 
} 

你可以看到我加d 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; } 

Answer 1

OK我已經解決了改變我的代碼的問題，我選用了純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> 

函數有一個名爲misTips全局變量，所以當標誌0變爲通過jQuery的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; 

}

，瞧，當div使得fadeIn影響它開始上上下下，當然CPU使用率上升，所以當我再次按下按鈕隱藏div，我恢復的CSS來降低CPU的使用率和提高性能。

我希望這可以幫助像我這樣的人:)