- r - 以节省内存的方式增长 data.frame
- ruby-on-rails - ruby/ruby on rails 内存泄漏检测
- android - 无法解析导入android.support.v7.app
- UNIX 域套接字与共享内存(映射文件)
简单的问题,但我遇到了实现问题。如果我有以下 DOM 设置:
<h1 class="fade" ng-repeat="child in parent.children" ng-show="parent.activeChild== child ">@{{ child.title }}</h1>
当 parent
模型的 activeChild
属性改变时,如何在模型改变 之前淡出当前事件的子节点,以及然后淡出新激活的子元素 post-change。
我已经粗略地使用了它,只使用了 CSS 转换:
.fade.ng-hide-add {
transition:opacity 1s ease;
}
.fade.ng-hide-remove {
transition:opacity 1s ease 1s;
}
.fade.ng-hide-add {
opacity:1;
&.ng-hide-add-active {
opacity:0;
}
}
.fade.ng-hide-remove {
opacity:0;
&.ng-hide-remove-active {
opacity:1;
}
}
但是,这最终会产生 this problem (Plunkr) :
本质上,我想链接我的动画。我试过阅读 ng-animate docs , 但我在提供我想要的效果所需的语法方面遇到了麻烦。
我看到 Angular 文档有这样的内容:
app.animation('.fade', [function() {
return {
addClass: function(element, className, doneFn) {
},
removeClass: function(element, className, doneFn) {
}
};
}]);
className
?这是我想在淡入/淡出时申请的类(class)吗?我期待的类(class)? doneFn
是什么意思?我假设这是一个在动画完成后运行的函数?里面有什么?doneFn
,我应该在 addClass
和 removeClass
函数中做什么?我想直接使用 Angular 的 ngAnimate 模块通过 CSS 或 JS 生成工作动画。我怎样才能做到这一点?
最佳答案
为什么要使用单独的<h1>
对于每个标题。您可以使用单个 <h1>
标记以显示您的标题。
我已经为您的问题创建了一个演示,并且已成功完成您的要求。
已更新
请注意,代码被编辑为使用 ngAnimate
模块。当您使用 ngAnimate
模块,它将创建一个类 .ng-hide
当你隐藏一个元素时,
这是您应用的 Controller ,
app2.controller("testController", ["$scope", "$timeout", function ($scope, $timeout) {
$scope.heading = {};
$scope.heading.show = true;
$scope.parent = {};
$scope.parent.children = ["A", "B", "C", "D"];
$scope.parent.activeChild = "A";
$scope.changeHeading = function (child) {
$timeout(function () {
$scope.parent.activeChild = child;
$scope.heading.show = true;
}, 1000);
}
}]);
你的 html 页面应该是这样的,
<div ng-controller="testController">
<h1 class="myAnimateClass" ng-show="heading.show" ng-class="{fadeIn : heading.fadeInModel==true, fadeOut : heading.fadeOutModel}"> {{parent.activeChild}} </h1>
<p ng-repeat="child in parent.children" ng-click="heading.show = false;changeHeading(child)">{{child}}</p>
</div>
并且我已经使用CSS3实现了淡入淡出动画,
.myAnimateClass {
-webkit-transition: opacity 1s ease-in-out;
-moz-transition: opacity 1s ease-in-out;
-o-transition: opacity 1s ease-in-out;
-ms-transition: opacity 1s ease-in-out;
transition: opacity 1s ease-in-out;
opacity:1;
}
.myAnimateClass.ng-hide {
opacity: 0;
}
解释
为了达到你的要求,我使用了ng-class
和 $timeout
在 angularJS 中。
你看,我只有一个<h1>
标记以显示您的标题。当我更改标题时,我只是更改它的绑定(bind)属性 $scope.parent.activeChild
.
而且我使用了两个作用域变量 $scope.heading.fadeOutModel
和 $scope.heading.fadeInModel
添加和删除类 fadeIn
和 fadeOut
动态地。
当用户点击更改标题时,我添加了类 fadeOut
到你的航向。因此,这将显示淡出动画。而且我还在 app.js 中触发了一个函数,changeHeading()
.
你可以看到,我强制 Angular 等待1000
完成淡出动画的毫秒数。这段时间之后,它会将所选标题替换为新标题并添加一个类 fadeIn
.因此,它将开始淡入动画。
希望这对你有帮助!!!
关于javascript - 在 ng-hide CSS 转换完成之前不要 ng-show 元素吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33336249/
不要 重复自己* 如何为现代机器学习设计开源库 🤗 Transformers 设计理念 “不要重复自己 (Don’t Repeat Yourself)” ,或 DR
我有这种情况。我有 2 个分支,master 和 develop。 在开发分支上我有一些文件,比如说 tools.js .如果我需要更改这个文件,提交它并将其推送到 Github 开发分支。 一切完成
我要上传图片但首先我想查看图像预览,然后当用户单击另一个 asp:button 时,保存图像。 对于预览部分,我使用以下代码: jQuery(document).ready(functi
我是一名编程初学者,现在从 Python 切换到 Clojure。我正在研究一个质数代码,但我没有弄错。我也想练习递归 (defn true-division [n i] (= (/ n i) (
运行 Python 2.7 执行时: $ python client.py get_emails -a "åäö" 我得到: usage: client.py get_emails [-h] [-a
根据我对“告诉-不要-询问”原则的理解,我的其他类不应该能够调用存储在任何其他类中的数据。因此,根据这一原则, setter/getter 是不受欢迎的。为了防止访问数据,它们通常写为: class
我在寻找什么: 我想使用SIMPLE模式最小化的出色功能,同时仅禁用一项特定功能(禁用内联本地功能)。 更新:答案是否定的,根据我的设置是不可能的。 但对于我来说,鉴于我正在使用Grails,有一种解
根据我对“告诉-不要-询问”原则的理解,我的其他类不应该能够调用存储在任何其他类中的数据。因此,根据这一原则, setter/getter 是不受欢迎的。为了防止访问数据,它们通常写为: class
是否可以不 float 具有样式 UITableViewStylePlain 的 UITableView 的节标题? 我正在 build AcaniChat, an open-source versi
当二进制文件、swfs、jar 和 flvs 在本地更改时,我尝试 pull 入更改,git 尝试 merge 它们并报告冲突。 然后,我分支到一个临时分支,提交本地更改的二进制文件,并在 pull
我正在尝试使用 Pex 来测试一些代码。我有一个具有四个具体实现的抽象类。我为四种具体类型中的每一种都创建了工厂方法。我还为抽象类型创建了一个,除了 this nice thread。说明,Pex 不
我正在将 asp.net mvc 3 和 razor 用于一个项目。在某些情况下,我需要从 Controller 序列化一个数组,将其放入 View 数据并将其分配给一个 js 对象。但是当我使用 输
是否可以让一个 webpack 开发服务器配置多个入口点(网站上有多个页面),每个入口点都有不同的配置? 具体来说,我希望将一个条目(页面的 JS 代码)分成 block ,但不要将另一个条目(带有已
我需要使用 hibernate 将 InputStream 或 byte[] (个人资料图像)保存在表中。这里的代码: @Override public void actualizarFotoPerf
我在一个 android 项目中同时拥有 GMS 和 HMS。 GMS 版本有效,但 HMS 不调用 onMapReady 回调。这是代码: private var mMap: HuaweiM
我有一个单元测试文件: module X04PatMatTest where import AssertError import Test.HUnit import X04PatMat ... 和 h
是否可以将 c++ 库包装到 c 中? 我该怎么做? 有现成的工具吗? (需要访问现有的 c++ 库,但只能使用 C) 最佳答案 您可以用 C 编写面向对象的代码,因此如果它是面向对象的 C++ 库,
我有一个 JSP 页面,它接受 SQL 查询,执行它们然后将结果返回到一个表中。一些结果偶尔会在其中包含 HTML 标记,即 - 结果将返回: This is the returned result!
我有一个问题。 我需要帮助。我一直在寻找解决方案大约 5 个小时。不幸的是没有成功。 我的问题是我有几个 Storyboard并且没有使用 Segue 创建。 我希望将选定的 Tableviewcel
当我尝试运行以下代码时: #include void main() { char *a[10] = {"hi", "hello", "how"}; int i = 0, j = 0;
我是一名优秀的程序员,十分优秀!