如何在使用javascript的css動畫結束後重定向？

Question

我有以下兩個腳本：

function redirect(id) { 
    window.location="somewebsite.com?parameter=" + id; 
} 

function addClassByClick(div){    
    document.getElementById(div).setAttribute('class','magictime magic'); 
} 

和我使用onclick事件來調用的動畫，但動畫結束前重定向工作，下面的代碼調用：

<i class="fa fa-trash-o" onclick=\'addClassByClick("trash-' . substr($t['target'], 1) .'");redirect(' . $t['code'] . ');\'></i> 

我試過使用setTimeout函數，但沒有工作。

Answer 1

那麼，setTimeout函數效果很好，我使用了錯誤的格式，下面的解決方案

function addClassByClick(div, id) { 
    document.getElementById(div).setAttribute('class', 'magictime puffOut'); 

    setTimeout(function(){ 
     window.location = "somewebsite.com?parameter=" + id; 
    }, 1000); 

} 

Answer 2

1）從onClick中刪除'重定向'呼叫。

2），可以使用事件transitionend和animationend

function redirect(id) { 
    window.location = "somewebsite.com?parameter=" + id; 
} 

/* From Modernizr */ 
function whichTransitionEvent() { 
    var t; 
    var el = document.createElement('fakeelement'); 
    var transitions = { 
     'transition': 'transitionend', 
     'OTransition': 'oTransitionEnd', 
     'MozTransition': 'transitionend', 
     'WebkitTransition': 'webkitTransitionEnd' 
    }; 
    for (t in transitions) { 
     if (el.style[t] !== undefined) { 
      return transitions[t]; 
     } 
    } 
} 

function addClassByClick(div) { 
    var transitionEvent = whichTransitionEvent(); 
    transitionEvent && e.addEventListener(transitionEvent, function() { 
     redirect() 
    }); 
    var transitionEnd = document.getElementById(div).setAttribute('class', 'magictime magic'); 
} 

的 「whichTransitionEvent」 可以換成 「動畫」，而不是 「轉型」 的文本，如可以使用:)