angularjs – ngAnimate,addClass回调在动画结束后不会运行

发布时间：2020-12-17 18:03:30 所属栏目：安全来源：网络整理

导读：我不明白为什么回调被立即调用,没有任何延迟,我已经阅读了文档,它说它解析css以检索转换持续时间. 但它似乎不起作用,这是我的代码：这是我的幻灯片指令： 'use strict'class SlideController constructor: ($log,$scope) - console.log 'controller init.'c

我不明白为什么回调被立即调用,没有任何延迟,我已经阅读了文档,它说它解析css以检索转换持续时间.

但它似乎不起作用,这是我的代码：

这是我的幻灯片指令：

'use strict'

class SlideController
  constructor: ($log,$scope) ->
    console.log 'controller init.'


class Slide
  constructor: ($log,$animate) ->
    link = (scope,element,attrs) =>
      scope.$watch 'slide.animation',(newValue,oldValue)->
        $animate.addClass element,'enter-right',()->
          console.log 'Animation ended!'



    return {
    link
    controller: ['$log','$scope',SlideController]
    replace: true
    restrict: 'E'
    scope:
      slide: '='
    templateUrl: '/views/directives/postSlide.html'
    transclude: true
    }

angular.module('app').directive 'postSlide',['$log','$animate',Slide]

这是我的css：

.post-slide.enter-left,.post-slide.leave-left,.post-slide.enter-right,.post-slide.leave-right{
  position:absolute;
  left:0px;
  top:0px;
}

/**
  Enter/leave right
**/
.post-slide.enter-right {
  -webkit-animation:0.5s enter-right;
  animation:0.5s enter-right;
  z-index:100;
  background-color:darkgreen;

}

.post-slide.leave-right {
  -webkit-animation:0.5s leave-right;
  animation:0.5s leave-right;
  z-index:10;
  background-color:darkred;
}

@keyframes enter-right {
  from { left:100%; }
  to { left:0; }
}

@-webkit-keyframes enter-right {
  from { left:100%; }
  to { left:0; }
}

@keyframes leave-right {
  from { left:0; }
  to { left:-100%; }
}

@-webkit-keyframes leave-right {
  from { left:0; }
  to { left:-100%; }
}

解决方法

我认为你不以正确的方式使用回调,addClass返回promise,而不是输入param with function.你应该像这样,
在纯粹的js中：

scope.$watch('slide.animation',function(newValue,oldValue) {
  return $animate.addClass(element,'enter-right').then(function() {
    return console.log('Animation ended!');
  });
});

建议：将动画持续时间增加到10秒,打开控制台,查找动画元素,并查看动画期间如何应用类.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!