AngularJS - Find end of collapse animation

2019-07-21 11:15发布

站内问答 / JavaScript
532 1 6

I have a simple problem with angularui bootstrap's collapse directive. I have a <select> menu. When the someone changes the menu, the content changes. However, I would like to add an animation before applying these changes. Specifically, I would like for the section to collapse and uncollapse before showing the new content. I can collapse it, but I would like to know how to detect when the collapse has finished so I can uncollapse it.

I could use the $timeout method that I currently use, but it feels "hackish" and "incorrect," because if the time for the collapse animation changes, then I have to change the time again.

Relavent code:

.directive("myBufferAnimation", function($timeout) {
    var ignoreFirst = true;
    return function(scope, element, attrs) {
        scope.$watch("selectBuffer", function(newValue) {
            if (ignoreFirst) {
                ignoreFirst = false;
                return;
            }


            scope.toCollapse = true;    
            // Detect end of animation here?
            // Bogus solution, as this just waits for one second rather than listening for the end of animation
            $timeout(function() {
               scope.selected = newValue;
               scope.toCollapse = false;
            }, 1000);
        });
    }
});

This jsfiddle illustrates the problem.

1条回答
戒情不戒烟
2楼-- · 2019-07-21 12:05

Looking at the angularui bootstrap's collapse directive, it does the animation using the $transition service but it doesn't expose away to hook into the promise return by the service. It does however change the class name of the element that has the collapse directive on it. You can use that to determine when the collapse animation has completed by putting a watch on the class attribute of the element.

Below is a working example of the code watching the class on the element. I made a change to use ng-change to execute the animation instead of the watching the selectBuffer. This eliminates the need for the ignoreFirst variable.

angular.module("testApp", ["ui.bootstrap"]).controller("TestCtrl", function($scope) {
  // This would actually be fetched from an ajax call
  $scope.data = [{
    "title": "Title 1",
    "content": "Content 1"
  }, {
    "title": "The Second Title",
    "content": "Some content goes here"
  }, {
    "title": "Title 3",
    "content": "Content 3"
  }];
  $scope.selected = $scope.data[0];
  $scope.selectBuffer = $scope.data[0];
  $scope.toCollapse = false;
}).directive("myBufferAnimation", function($timeout) {
  return function(scope, element, attrs) {
    scope.valueChanged = function() {
      scope.toCollapse = true;
      // save off the unregister method returned from $watch call.
      var unregisterWatch = scope.$watch(function() {
        return element.attr('class');
      }, function(newClass, oldClass) {
        // If the newClass is 'collapse' and the oldClass is 'collapsing'
        // this means that the collapsing animation has completed.
        if (newClass.indexOf("collapse") !== -1 && oldClass.indexOf("collapsing") !== -1) {
          scope.selected = scope.selectBuffer;
          scope.toCollapse = false;
          // unregister the $watch on the class attribute
          // since it is no longer needed.
          unregisterWatch();
        }
      });
    };
  }
});
<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap-css@3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
  <script src="https://code.angularjs.org/1.2.26/angular.js"></script>
  <script data-require="jquery@*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
  <script data-require="bootstrap@3.1.1" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
  <script data-require="angular-ui-bootstrap@0.11.0" data-semver="0.11.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.11.0.min.js"></script>
</head>

<body>
  <div ng-app="testApp">
    <div ng-controller="TestCtrl">
      <select ng-options="opt as opt.title for opt in data" ng-model="selectBuffer" ng-change="valueChanged()"></select>
      <br />
      <div my-buffer-animation="" collapse="toCollapse" class="test">
        <h1>{{selected.title}}</h1>

        <p>{{selected.content}}</p>
      </div>
    </div>
  </div>
</body>

</html>

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(6)