- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我想在 Angular JS 1.4.0 中实现动画,我希望它与可以在此页面上找到的动画相似(Angular 1.1.5):
http://www.nganimate.org/angularjs/ng-repeat/move
据我了解,在过去的几个版本中,ngAnimate 发生了重大变化。
我用 Plunkr 重新创建了我的应用程序的重要部分。可以在这里找到 http://plnkr.co/edit/9DK3LEAaGDgDT2kIILjG?p=preview
由于不同的过滤器输入,我希望显示和隐藏的项目使用 css 动画进行动画处理。
这是我的过滤器输入:
<input type="text" class="form-control" ng-model="search">
<ul>
<li ng-class="item" ng-repeat="name in people | filter:search">
<a href="#"> {{name.name}} </a>
</li>
</ul>
.item.ng-enter,
.item.ng-leave
{
-webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
-o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
position: relative;
display: block;
}
.item.ng-enter.item.ng-enter-active,
.item.ng-leave {
opacity: 1;
top: 0;
height: 30px;
}
.item.ng-leave.item.ng-leave-active,
.item.ng-enter {
opacity: 0;
top: -50px;
height: 0px;
}
最佳答案
像 angular 1.4 这样的最新版本,方法有点不同。首先,您应该包括 Angular 动画 js。
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.0-rc.2/angular-animate.js"></script>
var app = angular.module('myApp', ['ngAnimate']);
<li class="animate-repeat" ng-repeat="friend in friends | filter:q as results">
.animate-repeat {
line-height:40px;
list-style:none;
box-sizing:border-box;
}
.animate-repeat.ng-move,
.animate-repeat.ng-enter,
.animate-repeat.ng-leave {
-webkit-transition:all linear 0.5s;
transition:all linear 0.5s;
}
.animate-repeat.ng-leave.ng-leave-active,
.animate-repeat.ng-move,
.animate-repeat.ng-enter {
opacity:0;
max-height:0;
}
.animate-repeat.ng-leave,
.animate-repeat.ng-move.ng-move-active,
.animate-repeat.ng-enter.ng-enter-active {
opacity:1;
max-height:40px;
}
关于angularjs - Angular 1.4 中的 ngRepeat 动画,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30868686/
我有一个使用 ngRepeater 显示的数组,但通过这个指令,我使用 ngInit 指令来执行应该返回要显示的对象的函数。一切都工作正常,但是当我添加“新建”按钮并向数组添加新值时,只有一次我认为函
我想将搜索框的 $filter 应用于嵌套的 ng-repeat。我有一个类别数组,每个类别都包含一个项目列表。当我将 $filter 放在第一个 ngRepeat 上时,它会过滤并保留具有正确项目的
我正在尝试从嵌套的 ngRepeat 中访问 ngRepeat 父级的 $first。有没有办法在嵌套的 ngRepeat 中使用别名或访问 $first?我试过 $parent.$first,但它似
我正在使用 ng-repeat 指令呈现 TinyMCE 所见即所得列表: 当我更改 Controller 中小部件的顺序时,TinyMCE 的实例会自动相应地重新排列。 问题是 Tin
Controller 代码: function usersView() { var directive = { templateUrl : "users/users.
当 ng-repeat 完成更新时,我在触发指令时遇到了一些 AngularJS 问题。我有三个命名数组,通过三个链接切换到,允许 ng-repeat 显示选定的数组。我想在完成后关闭一些代码,因为我
当 Angular 指令包含 ngRepeat 元素时,ngRepeat 执行似乎发生在包含指令的链接执行之后。 是否有一种机制($watch、$observe 等)可用于在 ngRepeat 执行后
我试图允许重命名一行中的项目。我知道使用 $scope.editMode 等,但我意识到,当我将其用于 ng-repeats 时,我将列表中的所有条目都视为可编辑,而不是特定索引。这是我的 Html
我有一个对象数组。我正在尝试设置一种方法来按用户输入中的每一列进行过滤。 每个列都有一个输入下拉列表,您可以在其中选择一个值,这样您就可以为每列选择不同的过滤器。 col1 col2 col3 c
如果我有一个对象,其属性是数组,如何按该属性的第一个元素进行过滤? 数据 { Id: "0", Name: ["John", "Doe"] } ngRepeat {{ u.Name[0
我正在编写一个 AngularJS 应用程序(Angular 1),它需要在页面上显示一个表格列表。然而,某些键需要首先显示,如下所示: baz (data) bar (data) foo (data
我找到了source code ngRepeat 没有 HTML Compiler 指南中提到的 compile 选项. 我对此感到困惑...... 谁能告诉我为什么...... 最佳答案 ngRep
我有一个严重的问题。我必须实现一个包含一些组合数据的表格 View 。我必须在表行中显示一些数据,后面的行必须是有关该行的一些详细信息。更重要的是,用户应该能够隐藏单击该行的详细信息。 例如,模型是某
我有一个数组,其中包含一些数据,名为 data . 数据如下: var data = [ { id: 1, title: 'title', desc: 'desc',
我们可以在一个 html 标签中使用多个 ngRepeats 吗?就像下面的代码: 或 我们可以使用 && 区分同一个 ngRepeat 中的两个不同功能吗?就像下面的代码: 我的目的是创
我需要重复我拥有的所有项目,但我需要通过“数量”属性重新重复项目。 $scope.products = [{name: 'Mouse', price: 2, quantity: 3},
我正在构建一个旋转木马,方法是从数组的开头移动一个元素,然后将其推回到末尾,使旋转木马前进。从数组末尾弹出一个元素并将其取消移位到数组的开头将倒回该元素。这很好用。当我尝试为它制作动画时,问题就出现了
我在我的 Angular 应用程序中使用 ngRepeat,由于某种原因,ngRepeat 没有填充,即使它连接到的集合填充了正确的数据。 我正在做的是向节点服务器发送 http get 请求以请求数
当 AngularJS 1.6.0(与旧版本相同)和 ngRepeat 指令用作元素嵌套在表格中时,我遇到了一个奇怪的问题。 简单地说在 , 然后放一个 内部:它不起作用。但是如果你把 在 之外,例
我想访问我的数组数组的每个值: [ ["0","0","0"], ["1","1","1"], ["1","0","0"] ] 我只在里面做了两次 ngRepeat {{line}}
我是一名优秀的程序员,十分优秀!