AngularJS - 寻找合拢动画结束 [英] AngularJS - Find end of collapse animation

查看：173
本文介绍了AngularJS - 寻找合拢动画结束的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我有 angularui引导的<$ C $一个简单的问题C>崩溃指令。我有一个＆LT;选择＆GT; 菜单。当有人更改菜单，内容的变化。不过，我想应用这些更改前添加动画。具体来说，我想为一节崩溃，并显示新内容之前uncollapse。我可以折叠，但我想知道如何在倒塌已完成检测，所以我可以uncollapse它。

我可以使用 $超时的方法，我目前使用，但感觉hackish的和不正确，因为如果时间合拢动画更改，然后我必须再次更改时间。

Relavent code：

  .directive（myBufferAnimation功能（$超时）{
    VAR ignoreFirst =真;
    返回功能（范围，元素，ATTRS）{
        范围。$表（selectBuffer功能（newValue）以{
            如果（ignoreFirst）{
                ignoreFirst = FALSE;
                返回;
            }
            scope.toCollapse = TRUE;
            //这里检测动画的结束？
            //虚假的解决方案，而不是倾听动画的结尾，因为这只是等待一秒钟
            $超时（函数（）{
               scope.selected =为newValue;
               scope.toCollapse = FALSE;
            }，1000）;
        }）;
    }
}）;

这的jsfiddle 说明了这个问题。


解决方案

纵观angularui引导的崩溃指令，它使用$转换服务的动画，但它不公开客场挂接到由服务承诺的回报。但它确实改变有倒闭它指令元素的类名。你可以用它来确定通过把手表上的元素的类属性时合拢动画已完成。

下面是code观看元素类的工作示例。我做了一个改变使用 NG-变化来执行的动画，而不是看 selectBuffer 。这消除了 ignoreFirst 变量的需求。

\r
\r

angular.module（testApp，[ui.bootstrap]）。控制器（TestCtrl功能（$范围）{\r
  //这实际上从一个Ajax调用来取\r
  $ scope.data = [{\r
    头衔：标题1\r
    内容：内容1\r
  }，{\r
    头衔：第二标题\r
    内容：有些内容放在这里\r
  }，{\r
    头衔：标题3\r
    内容：内容3\r
  }];\r
  $ scope.selected = $ scope.data [0];\r
  $ scope.selectBuffer = $ scope.data [0];\r
  $ scope.toCollapse = FALSE;\r
}）指令（myBufferAnimation功能（$超时）{\r
  返回功能（范围，元素，ATTRS）{\r
    scope.valueChanged =功能（）{\r
      scope.toCollapse = TRUE;\r
      //保存了从$手表调用返回的注销方法。\r
      VAR unregisterWatch =范围。$表（函数（）{\r
        返回element.attr（类）;\r
      }，功能（的NewClass，oldClass）{\r
        //如果是的NewClass崩溃和oldClass是'崩溃'\r
        //这意味着合拢动画已完成。\r
        如果（！newClass.indexOf（崩溃）== -1放大器;＆安培; oldClass.indexOf（崩溃）== -1！）{\r
          scope.selected = scope.selectBuffer;\r
          scope.toCollapse = FALSE;\r
          //注销的类属性$腕表\r
          //因为它不再需要。\r
          unregisterWatch（）;\r
        }\r
      }）;\r
    };\r
  }\r
}）;

\r

＆LT;！DOCTYPE HTML＆GT;\r
＆LT; HTML和GT;\r
\r
＆LT; HEAD＆GT;\r
  ＆LT;链路数据需要=bootstrap-css@3.1.1数据semver =3.1.1的rel =stylesheet属性HREF =// netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap .min.css/＆GT;\r
  ＆LT;脚本SRC =HTTPS：//$c$c.angularjs.org/1.2.26/angular.js＆GT;＆LT; / SCRIPT＆GT;\r
  ＆所述;脚本数据需要=的jquery @ *数据semver =2.1.1SRC =// cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js\"> ＆LT; / SCRIPT＆GT;\r
  ＆所述;脚本数据需要=bootstrap@3.1.1数据semver =3.1.1SRC =// netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js\"> ＆LT; / SCRIPT＆GT;\r
  ＆所述;脚本数据需要=angular-ui-bootstrap@0.11.0数据semver =0.11.0SRC =htt​​p://angular-ui.github.io/bootstrap/ui-bootstrap-tpls- 0.11.0.min.js＆GT;＆LT; / SCRIPT＆GT;\r
＆LT; /头＆GT;\r
\r
＆LT;身体GT;\r
  ＆LT; D​​IV NG-应用=testApp＆GT;\r
    ＆LT; D​​IV NG控制器=TestCtrl＆GT;\r
      ＆LT;选择NG选项=opt作为opt.title在数据选择NG模型=selectBufferNG变化=的valueChanged（）＆GT;＆LT; /选择＆GT;\r
      ＆LT; BR /＆GT;\r
      ＆LT; D​​IV我的缓冲动画=崩盘=toCollapse级=测试＆GT;\r
        ＆LT; H1＆GT; {{selected.title}}＆LT; / H1＆GT;\r
\r
        ＆所述p为H.; {{selected.content}}＆下; / P＆GT;\r
      ＆LT; / DIV＆GT;\r
    ＆LT; / DIV＆GT;\r
  ＆LT; / DIV＆GT;\r
＆LT; /身体GT;\r
\r
＆LT; / HTML＆GT;

\r

\r
\r

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.

解决方案

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>

这篇关于AngularJS - 寻找合拢动画结束的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆