AngularJS指令中CSS的事件監聽器未被觸發/捕獲

Question

我試圖在css動畫完成後執行操作。該指令看起來像這樣....

.directive('catchProfileAnimation', function () { 
    'use strict'; 

    /* I stole this 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]; 
      } 
     } 
    } 
    /* Get event Type */ 
    var transitionEvent = whichTransitionEvent(); 


    return { 
     restrict: 'A', 
     link: function (scope, element) { 

      element.bind(transitionEvent, function (evt) { 
       console.log('animation complete!', evt); 
      }); 

     } 
    } 
}); 

我的HTML，它看起來像這樣內...

<div data-ng-show="profile.showProfile" class="profile-card" data-ng-class="{'slide-left-slow': profile.showProfile }" data-catch-profile-animation> 
Lot's of lovely HTML here 
</div> 

的CSS類看起來是這樣的...

.slide-left-slow { 

    background-color: $white; 
    -webkit-animation: slide-l-100 .4s ease-in !important; 
    -webkit-animation-iteration-count: 1 !important; 
    -webkit-animation-fill-mode: forwards !important; 
    -webkit-transform:translate(-100%); 

    -moz-animation: slide-l-100 .4s ease-in !important; 
    -moz-animation-iteration-count: 1 !important; 
    -moz-animation-fill-mode: forwards !important; 
    -moz-transform:translate(-100%); 

    animation: slide-l-100 .4s ease-in !important; 
    animation-iteration-count: 1 !important; 
    animation-fill-mode: forwards !important; 
    transform:translate(-100%); 
} 

@keyframes slide-l-100 { 
    100% { 
     -webkit-transform: translate(0%); 
     -moz-transform: translate(0%); 
     transform: translate(0%); 
    } 
} 

一旦CTRL設置值爲profile.showProfile動畫執行，當我檢查Chrome開發工具中的元素時，元素具有註冊的EventListener。但消息console.log('animation complete!', evt);未被髮送到控制檯。我究竟做錯了什麼？

Answer 1

您的代碼觸發animationEnd事件而不是transitionEnd。我試着用下面的代碼替換您的轉換陣列，並在我的chrome瀏覽器測試：

var transitions = { 
      'WebkitAnimation': 'webkitAnimationEnd' 
     }; 

Answer 2

多虧了上面的答案，我意識到我的錯誤，我改變了function whichTransitionEvent()監聽animationend不transitionend！點到Merhawi，但我想我會包括我的答案...

function whichAnimationEvent() { 
      var t; 
      var el = document.createElement('fakeelement'); 
      var animation = { 
       "animation"  : "animationend", 
       "OAnimation"  : "oAnimationEnd", 
       "MozAnimation" : "animationend", 
       "WebkitAnimation": "webkitAnimationEnd" 
      }; 

      for (t in animation) { 
       if (el.style[t] !== undefined) { 
        return animation[t]; 
       } 
      } 
     } 
     /* Get event Type */ 
     var animationEvent = whichAnimationEvent(); 

    return { 
     restrict: 'A', 
     link: function (scope, element) { 
      element.bind(animationEvent, function (evt) { 
       console.log('animation complete!', evt); 
      }); 

     } 
    }