个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我有一个关于 angularui bootstrap 的简单问题的 collapse指示。我有一个 <select>菜单。当某人更改菜单时，内容也会更改。但是，我想在应用这些更改之前添加一个动画。具体来说，我希望在显示新内容之前折叠和展开该部分。我可以折叠它，但我想知道如何检测折叠完成的时间，以便我可以展开它。
我可以使用 $timeout我目前使用的方法，但感觉“hackish”和“不正确”，因为如果折叠动画的时间发生变化，那么我必须再次更改时间。
相关代码:
.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);
});
}
});
这jsfiddle说明问题。
最佳答案
查看 angularui bootstrap 的折叠指令，它使用 $transition 服务执行动画，但它不会暴露以 Hook 服务返回的 promise 。但是，它确实会更改其上具有 collapse 指令的元素的类名。您可以通过监视元素的类属性来使用它来确定折叠动画何时完成。
下面是监视元素类的代码的工作示例。我做了一个更改，使用 ng-change 来执行动画，而不是观看 selectBuffer。这消除了对 ignoreFirst 变量的需要。
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>关于javascript - AngularJS - 找到折叠动画的结尾，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/26196995/
25
4
0
C 中的字符串或字符数组必须以空字符结尾才能知道它们在哪里结束。为什么相同的规则不适用于其他类型的数组？ 例如。计算机如何知道整数数组在哪里结束？整数/浮点数/ double 数组在内存中的表示方式有
我有一堆文件需要查看。这些文件中的所有行都以 ^M (\x0D) 结尾，但最后一行以 ^M^J (\x0D\x0A) 结尾。 显然，Vim 将文件类型确定为 DOS，效果是文件的整个内容是 显示在一行
以下是来自 Why's Poignant Guide to Ruby Chapter 6 的 Ruby 代码片段，他试图在 Ruby 中演示元编程: # Get a metaclass for thi
我有一个编程问题，希望有人能帮我解决。我正在尝试为一项工作任务学习 C 编程，我为自己设定了一个小项目，其中包括读取文件树，其中包括获取有关每个文件的信息的所有子目录。 我遇到的问题是我的程序不会忽略
其他章节请看： react 高效高质量搭建后台系统 系列 尾篇 本篇主要介绍 表单查询 、 表单验证 、 通知 （WebSocket）、 自动构建
我是 FFmepg 的新手，所以如果术语有误，请原谅我。 我想将文本和音频添加到现有的视频文件中。我链接在一起 2 drawText s，然后在不同的过滤器中，我想合并原始源视频的音轨和一些背景音乐。
使用grep我可以使用以下命令搜索单词的开头和结尾 grep -e '\' 这将找到I have a leg.，但找不到play allegro here。 Ripgrep(0.10.0)似乎不支持
$.ajax({ type:'GET', cache: 'false', url:"/foo/", data:{"id": pid}, success:func
我想在我的 iPhone 应用程序中处理旋转手势并在此期间旋转 imageView。在手势结束时，我想将 imageView 旋转到固定位置。所以，即。如果我将 imageView 从 0 弧度旋转到
我知道检测是一种将跟踪代码动态添加到方法中以启用跟踪和调试的技术。 我想知道这是否只是一个“跟踪”选项，硬编码到 CLR 中以仅添加跟踪代码，或者是否能够向方法添加任何代码？ 例如，我想检查某个类中每
我正在查看一些专有源代码:使用库的示例程序。 代码是用 C 和 C++ 编写的，使用 make 构建系统。 每个文件都以注释掉的 [] 结尾:/*[]*/ 源文件和 #[]#对于生成文件。这可能是什么
是否可以循环文件中的每一行并检查它是如何结束的(LF/CRLF): using(StreamReader sr = new StreamReader("TestFile.txt")) { st
我从 JSF 网站的编程开始。目前所有文件都以 .xhtml 结尾。当我去http://localhost:8080/myProject/start.jsf一切正常。但是当我将文件从 start.xh
这是一个多站点问题。我有很多网站都带有.htaccess文件，其中包含多行，类似于: rewriterule ^(page-one|page-two|page-three)/?$ /index.php
真的没有简单的映射来跳转到段落的第一行或最后一行吗？ { 和 } 是“独占”命令，因此它们会跳转到段落前后的空行如果有的话，但对于段落的实际第一行或最后一行(即，当段落位于缓冲区的顶部或底部时)。 这
我已经尝试了该站点上所有可能的解决方案。我以前使用过改造，过去已经解决了这个问题，但这次我无法解决。我正在使用 StackOverflow API 来获取问题及其详细信息。 API : https:/
我正在做模式匹配如下。但我没有得到正确的输出。请建议正确的代码以获得正确的输出。 代码 #! /usr/bin/perl -w my $subString = "1.3.6.1.2.1.26.2.1.
如何创建 if 语句以检查整数是否以 0 结尾？ 例如，我想要一个这样的 if 语句: var test = 107; //107 is an example it'should some unkno
这个问题已经有答案了: javascript how to tell if one number is a multiple of another (6 个回答) 已关闭 3 年前。 每当秒 var
我正在遍历文件树以识别所有 .DYLIB 文件。 #!/bin/bash #script to recursively travel a dir of n levels function traver
我是一名优秀的程序员,十分优秀！