ngAnimate，addClass 回调在动画结束后不运行

Posted 2023-05-09

【中文标题】ngAnimate，addClass 回调在动画结束后不运行

【英文标题】：ngAnimate, addClass callback doesn't run after animation ended

【发布时间】：2013-12-15 09:40:10

【问题描述】：

我不明白为什么回调会立即被调用，没有任何延迟，我已经阅读了它说它解析 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%; 

【参考方案1】：

我认为你没有以正确的方式使用回调，addClass 返回承诺，而不是带函数的输入参数。你应该有这样的东西， 在纯js中：

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

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

【讨论】：

回复较晚，但可能会对某人有所帮助：D