css转换的角度监听事件如何在ng-style触发转换的地方结束

Question

我不得不在代码末尾添加一些 jQuery 来检测 css 转换何时结束。 有没有办法让角度做到这一点？

working jsfiddle is here

它的工作方式是拥有一个包含顶部和左侧坐标的对象，该对象由 ng-style 作为内联样式注入。

其中几个对象保存在一个数组中。每当检测到 css3 结束转换事件时，都会注入下一个对象。

这是带有 Angular 指令的 HTML。

 <div id="mycontainer" ng-controller="mycontroller">
   <div ng-repeat="item in mylist" id="item{{item.key}}" class="item" ng-style="myproperties({{item.key}})">{{item.value}}</div>
 </div>
 <div id="readout"></div>

这里是 Javascript / Angular，你会看到 jQuery，很明显是在末尾添加的。

var myapp = angular.module('myapp', []);
myapp.controller(
  'mycontroller', 
  [
    '$scope',
    '$log',
    function($scope, $log) {
      // define the items
      $scope.mylist = [];
      for (var i = 0; i < 6; i++) {
        $scope.mylist[i] = {'key':i, 'value':i, 'inlinestyle':{'top':'60px','left': (i*60)+'px'}};
      }

      $scope.myproperties = function(arg) {
              return $scope.mylist[arg].inlinestyle;
      };

      /*  test animatimng item number 2 */

      var anime = [
        {'top':'120px','left':'50px', 'background':'#ccc'},
        {'top':'150px','left':'120px', 'background':'#3cc'},
        {'top':'60px','left':'120px', 'background':'#c3c'},
        {'top':'120px','left':'130px', 'background':'#cc3'},
        {'top':'150px','left':'160px', 'background':'#fff'}
      ];
      var playhead = 0;
      var saveTimeStamp = 0;

      // adter a second, start the anime sequence
      setTimeout(function(){
        $scope.mylist[2].inlinestyle = anime[0];              
        $scope.$apply();
        playhead++;       
      }, 1000);

      //listener for end of transition
      // aaaah ...  now I have to use jQuery
      $('html').on('transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd', function(e){
        if (( e.timeStamp != saveTimeStamp ) && (anime[playhead])  )  {
          $('#readout').append('ended '+playhead+' '+JSON.stringify(anime[playhead])+'<br>');
          saveTimeStamp = e.timeStamp;            
          $scope.mylist[2].inlinestyle = anime[playhead];              
          $scope.$apply();
          playhead++;
        }                
      });

    }
  ]
);

Answer 1

Angular 的方式是定义一个指令。

我关注了这篇博文：https://jonsuh.com/blog/detect-the-end-of-css-animations-and-transitions-with-javascript/ 并在这样的角度指令中转换该代码：

 myapp.directive('myTransitionEnd', [
           '$parse',
 function ( $parse  ) {
    var transitions = {
        "transition"      : "transitionend",
        "OTransition"     : "oTransitionEnd",
        "MozTransition"   : "transitionend",
        "WebkitTransition": "webkitTransitionEnd"
    };

    var whichTransitionEvent = function () {
        var t,
            el = document.createElement("fakeelement");

        for (t in transitions) {
            if (el.style[t] !== undefined){
                return transitions[t];
            }
        }
    };

    var transitionEvent = whichTransitionEvent();

    return {
        'restrict': 'A',
        'link': function (scope, element, attrs) {
            var expr = attrs['myTransitionEnd'];
            var fn = $parse(expr);

            element.bind(transitionEvent, function (evt) {
                console.log('got a css transition event', evt);

                var phase = scope.$root.$$phase;

                if (phase === '$apply' || phase === '$digest') {
                    fn();
                } else {
                    scope.$apply(fn);
                }
            });
        },
    };
 }]);

然后，像这样更改您的 html：

<div id="mycontainer" ng-controller="mycontroller" my-transition-end="callSomeScopeFunctionYouDefined()">