無法檢測到動畫結束

Question

我試圖監聽動畫何時結束，以便在完成時可以隱藏該元素，但偵聽器似乎沒有開火......我做錯了什麼？

的JavaScript

angular.module('webApp') 
    .controller('MainController', function ($window) { 
    vm.loader = document.getElementById('loader'); 

    angular.element($window).bind('load', function() { 
     vm.loader.style.opacity = 0; 
    }); 

    vm.loader.addEventListener('webkitAnimationEnd', function(){ 
     vm.loader.style.display = 'none'; 
    }, false); 
    }); 

HTML

<div id="loader" ng-init='load()'> 
    <div class="loader"> 
     <div class="position-center-center"> 
     <img src="images/shared/logo.svg" id="loader-img"> 
     <p class="font-playfair text-center">Please Wait...</p> 
     <div class="loading"> 
      <div class="ball"></div> 
      <div class="ball"></div> 
      <div class="ball"></div> 
     </div> 
     </div> 
    </div> 
    </div> 

CSS

.ball { 
    background: #000 !important; 
} 
#loader { 
    opacity:1; 
    transition: opacity 1s; 
    transition-delay: 2s; 
} 
#loader-img { 
    height: 40%; 
    width: 40%; 
} 

Answer 1

webkitAnimationEnd不是你需要使用相應的事件來檢測轉換權事件：webkitTransitionEndotransitionendoTransitionEndmsTransitionEndtransitionend

來自MDN。

當CSS轉換完成時觸發transitionend事件。在完成之前刪除轉換的情況下，例如如果轉移屬性被刪除或顯示設置爲「無」，則不會生成事件。