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不是检测过渡的正确事件，您需要使用相应的事件：webkitTransitionEnd otransitionend oTransitionEnd {{1} } msTransitionEnd

来自MDN。

CSS转换完成后会触发transitionend事件。如果在完成之前删除了转换，例如如果删除了transition-property或者将display设置为“none”，则不会生成该事件。

无法检测动画结束

1 个答案: