动画未应用于Angular ng-repeat列表中的所有项目
是因为ng-repeat指令在渲染列表时会创建多个相同的元素，而动画默认只会应用于元素的进入和离开过程，而不会应用于元素的更新过程。为了在ng-repeat列表中应用动画，需要使用Angular的内置动画模块ngAnimate。
要在ng-repeat列表中应用动画，可以按照以下步骤进行操作：
- 引入ngAnimate模块：确保在Angular应用中引入了ngAnimate模块，这个模块提供了一些指令和服务，用于处理动画效果。
- 定义动画样式：使用CSS或者Angular的动画DSL（Domain Specific Language）来定义动画的样式和过渡效果。可以定义元素的进入、离开和更新过程的动画效果。
- 添加动画类名：在ng-repeat的元素上添加一个动画类名，用于触发动画效果。可以使用ng-class指令根据条件动态添加或移除动画类名。
- 配置动画选项：可以通过在ng-repeat指令上使用ng-animate属性来配置动画选项。例如，可以设置动画的持续时间、延迟时间、缓动函数等。
以下是一个示例代码，演示如何在ng-repeat列表中应用动画：
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular-animate.min.js"></script>
<style>
.fade-enter,
.fade-leave {
transition: opacity 1s;
}
.fade-enter {
opacity: 0;
}
.fade-enter-active {
opacity: 1;
}
.fade-leave {
opacity: 1;
}
.fade-leave-active {
opacity: 0;
}
</style>
</head>
<body>
<div ng-controller="myCtrl">
<ul>
<li ng-repeat="item in items" ng-class="{'fade': item.fade}">
{{item.name}}
</li>
</ul>
<button ng-click="toggleFade()">Toggle Fade</button>
</div>
<script>
angular.module('myApp', ['ngAnimate'])
.controller('myCtrl', function($scope) {
$scope.items = [
{name: 'Item 1', fade: true},
{name: 'Item 2', fade: true},
{name: 'Item 3', fade: true}
];
$scope.toggleFade = function() {
angular.forEach($scope.items, function(item) {
item.fade = !item.fade;
});
};
});
</script>
</body>
</html>在上述示例中，通过给ng-repeat的元素添加fade类名来触发动画效果。点击"Toggle Fade"按钮可以切换元素的fade属性，从而添加或移除fade类名，实现动画的显示和隐藏。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云对象存储（COS）。
- 腾讯云云服务器（CVM）：提供弹性计算能力，可根据业务需求快速创建、部署和扩展云服务器实例。适用于各种应用场景，包括网站托管、应用程序部署、大数据分析等。了解更多信息，请访问腾讯云云服务器（CVM）。
- 腾讯云对象存储（COS）：提供安全、稳定、低成本的对象存储服务，可用于存储和管理各种类型的数据，包括图片、视频、文档等。适用于数据备份、静态网站托管、大规模数据存储等场景。了解更多信息，请访问腾讯云对象存储（COS）。
请注意，以上答案仅供参考，具体的技术实现和产品选择应根据实际需求和情况进行评估和决策。
相关·内容
1回答
似乎无法设置ng-show AngularJS的动画
angularjs、ng-animate
当满足ng-show条件时，我尝试在动画中进行淡入淡出。我可以看到ng-hide的动画，但看不到ng-show的动画。 HTML： <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.9/angular.js"></script>
<script src="https://cdn.jsdelivr.net/npm/angular-animate@1.7.8/angular-animate.js"></script>
<div
浏览 25提问于2020-04-13得票数 1
回答已采纳
1回答
AngularJS动画元素消失
angularjs、twitter-bootstrap、angularjs-animation
在下面的示例中，您可以看到，当项目被添加到列表中时，它正在执行淡出动画，然后消失，我希望它在动画之后具有引导样式，它可能与引导css冲突，但我无法确定到底是哪个css代码在这样做。
码
html
<head>
<link rel="stylesheet" href="https://bootswatch.com/lumen/bootstrap.min.css">
<link rel="stylesheet" href="style.css"/>
<script
浏览 8提问于2015-12-18得票数 1
回答已采纳
1回答
为什么文本不会淡出？
html、css、angularjs
我开始学习AngularJS，并遵循教科书上的一个编码示例。根据这本书的说法，示例代码应该具有使文本淡出的动画效果，但它没有。有人知道我应该添加什么或我遗漏了什么吗？谢谢。 <!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS animation installation</title>
</head>
<body>
<style type="text/cs
浏览 19提问于2020-06-16得票数 0
7回答
在ng隐藏CSS转换完成之前，不要显示ng元素吗？
javascript、angularjs、animation
问题很简单，但我在实现上遇到了麻烦。如果我有以下DOM设置：
<h1 class="fade" ng-repeat="child in parent.children" ng-show="parent.activeChild== child ">@{{ child.title }}</h1>
当activeChild模型的parent属性发生变化时，如何在parent模型更改之前淡出当前活动的子级，然后在新激活的子级中淡出更改后的。
我让它大致工作，只使用以下CSS转换：
.fade.ng-hide-add {
t
浏览 8提问于2015-10-25得票数 33
回答已采纳
1回答
角ngAnimate列表项自动淡出
javascript、angularjs
在一个简单的应用程序中，我对ngAnimate有一个奇怪的问题，我正在使用这个普通的堆栈。
angular.js和角动画. are都是1.4.7版本。
我有一个看起来像这样的ul：
<ul>
<li ng-repeat="item in items" class="fade">
{{item.name}}
</li>
</ul>
在控制器中，我使用$http.get()调用MongoDB来获取items数组。
这是简单动画的CSS代码：
.fade {
transition: 1s li
浏览 2提问于2015-11-09得票数 2
回答已采纳
1回答
在Chrome中响应应用程序的不透明性转换
html、css、reactjs
我正在工作的一个波多罗时钟在反应，我想要短信(前。“设定时间”、“聚焦”等)以及播放/重置按钮淡出以及按下播放/复位按钮时。因此，按下播放按钮就会淡出“设定时间”，然后播放按钮在计时器启动后淡入“焦点”和重置按钮。
这在火狐中很好，但是在Chrome中，淡入不能正常工作，即使我尝试添加-webkit-前缀供应商。我还注意到在Internet中，消息元素在淡入动画之后返回到0不透明。
您可以在这个上查看我的代码和一个现场演示。
我使用将转换应用到我想要在元素卸载和挂载时淡出的元素。
相关的JSX位于PomodoroTimer.jsx的底部，或者这里是为了方便起见：
<CSSTransi
浏览 1提问于2018-06-12得票数 1
回答已采纳
5回答
角ng重复禁用除第一项外的所有项目
javascript、jquery、angularjs
我有一份物品清单。每个项目都在div中。我只想显示第一项启用，但其他显示禁用。
AngularJs
angular.module('example', [])
.controller('myCtrl', function Ctrl($scope) {
$scope.items = [1,2,3];
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-
浏览 5提问于2016-09-01得票数 2
1回答
纳克角动画-重复不工作
css、angularjs、ng-animate
我想为我的ng-repeat生成的项目做一个简单的淡出动画，我遵循了上的所有说明，但仍然没有骰子。
这是我的模块
var app = angular.module('testApp', ['ngRoute','ngAnimate']);
这是我标记中的ng-repeat
<div class="col-md-6 col-xs-12" ng-repeat="mark in marks" ng-animate="'animate' ">
<div class=
浏览 1提问于2016-03-23得票数 3
回答已采纳
1回答
AngularJS -使用ngAnimate时从列表滞后中删除
javascript、css、angularjs、angularjs-ng-repeat、ng-animate
我正在使用项目中的ngAnimate模块在特定条件下对列表中的项目进行动画化。问题是，如果我使用ngAnimate，那么从列表中删除要比没有动画花费更多的时间。
这是我的HTML：
<body ng-app="JU">
<div ng-app ng-controller="MyCtrl">
<h3>Non Laggin List</h3>
<ul>
<li ng-repeat="i in items" class="">{{i}}<but
浏览 2提问于2014-10-15得票数 2
回答已采纳
1回答
角用户界面警报:淡入和淡出不工作
angularjs
，我试图在创建警报时淡入警报，并在它们关闭时淡出(手动或自动)。我用的是ng动画，但是动画被忽略了。有什么想法吗？
HTML
<style>
.fade.ng-enter {
transition:0.5s linear all;
opacity:0;
}
.fade.ng-enter.ng-enter-active {
opacity:1;
}
.fade.ng-leave {
transition:0.5s linear all;
opacity:1;
}
.fade.ng-leave.ng-leave-active {
opacity:0;
}
&
浏览 8提问于2016-02-19得票数 1
回答已采纳
3回答
表行上的Vuejs转换
javascript、vue.js、vuejs2
我正在尝试在html表行(vue.js)上转换(动画)，但没有成功。下面是完整的示例
new Vue({
el: '#data',
data: {
items: [
{
data: 'd1',
more: false
},
{
data: 'd2',
more: false
},
]
}
});
.fade-enter-active, .fad
浏览 3提问于2017-08-17得票数 12
回答已采纳
1回答
寻找angular.js下滑式动画的改进
css、html、angularjs、css-animations
我确实有一个运行代码示例()，它显示了一个使用angular.js (1.2.0)的幻灯片动画。但有两个问题我不知道如何解决：
a)当点击“添加项目”链接时，动画首先向下移动“添加项目”链接，然后从顶部滑入新项目。如果“添加项目”链接与新出现的项目一起滑下，如何更改这一点？
b)如何防止第一次加载页面时项目淡入？
HTML
<div ng-controller="MyCtrl">
<div ng-repeat="item in items" class="animation-slide-down">
浏览 0提问于2013-11-10得票数 2
1回答
ng动画不工作角度
angularjs
尝试添加动画输入，离开和移动效果在我的ng-重复，但它没有工作的任何提示？
脚本：
<script>
angular.module('lipapp', ["ngAnimate"]).controller('lipapp_Module_Control', function ($scope, $http, $window) {
$scope.CompaignBasket = [];
$scope.InitialCompaignBasket = function (){
.....Raw Data
浏览 1提问于2014-10-31得票数 0
回答已采纳
1回答
ngAnimate没有在ng-重复上添加动画类
angularjs、animation
我包括了angular-animate.js
<script src="bower_components/jquery/jquery.js"></script>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/sass-bootstrap/dist/js/bootstrap.js"></script>
<script src="bo
浏览 0提问于2014-01-17得票数 3
3回答
使用更改范围变量的AngularJS动画div
javascript、html、css、angularjs
我对角质还不熟悉。我想使用ng-点击一个ng-重复元素来动画一个div体。到目前为止，这就是我所尝试的。
app.js
var app = angular.module( 'app', [] );
app.controller('appController', function($scope) {
$scope.items = [
{"id": "id1", "name": "Name 1"},
{"id": "id2", "name
浏览 9提问于2016-12-05得票数 5
回答已采纳
1回答
在ng-重复块中动画浮动项。
angularjs、angularjs-ng-repeat、css-animations、ng-animate
我正在使用angularjs和ngAnimate，但是遇到了动画处理的问题。我有一个ng-repeat，它显示一系列浮动块，允许用户单击其中的链接并导航到页面的较低级别(加载新的级别数据)。当单击其中一个链接时，我用新级别的块更新$scope.items数组，这是动画行为笨拙的地方。现有的块在逐渐消失时会向下滑动，以便为正在衰退的新块腾出空间。我想淡出现有的块，然后在新块中淡出(而不是同时)。我已经尝试了我能想象到的每一件事，以延迟‘进入’动画，给‘离开’动画完成的时间，但到目前为止已经是空的。
我已经将我的应用程序归结为这个简单的例子-- ng-click中的ng-click函数通常会对新数
浏览 4提问于2015-02-12得票数 2
1回答
文本堆叠在一起，因为它是为不同的值角度JS的互换。
javascript、angularjs、ng-animate
因此，当我按任何一个按钮，文本应该呈现在一个固定的位置。然而，文本确实呈现，但它需要前一个文本的结束动画才能完成它采取固定的位置。守则如下：
HTML
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.9/angular.js"></script>
<script src="https://cdn.jsdelivr.net/npm/angular-animate@1.7.8/angular-animate.js"></script>
浏览 3提问于2020-04-13得票数 1
回答已采纳
1回答
用不同的超时对数组中的每个项目进行角度动画。
javascript、jquery、angularjs、ng-animate
我正在尝试将使用jQuery编码的应用程序转换为使用Angular的应用程序。
我在一个名为categories的变量中有几个包含类似数据的数组
.controller('AppController', function($scope,$timeout){
var self=this;
self.categories=[[],[],[]];
self.selected=0;
setInterval(getNewItems,500);
});
我使用ng-repeat显示数据
<div id="numbers">
<div c
浏览 2提问于2016-05-15得票数 1
1回答
模型变化时的AngularJS动画
javascript、css、angularjs、animation
我一直在搜索谷歌和斯塔克溢流，但没有找到我正在寻找的。
这是我所拥有的。我保证我会为解决这个问题付出真诚的努力。
问题如下:我有动画处理列表。当我使用超时值将项目添加到列表中时，它们将正确地显示出来。但是，"title“变量是一个字符串。当此值发生变化时，我想应用动画。老实说，我现在仍然不知道该如何让它发挥作用。我知道我可以为ng-隐藏的动画添加css类，但我仍然不太明白如何在这里适合它。任何帮助，我们都会提前表示感谢。请指点我。你不用给我密码。即使是对如何实现这一目标的高级别描述也足够了。
// app.js
(function() {
var app = angular.mod
浏览 2提问于2015-04-03得票数 0
回答已采纳
1回答
AngularJS CSS列表动画
html、css、angularjs、css-animations
我很难弄明白一些基本的AngularJS 1.4+CSS动画东西。
我有一个列表，在这个列表中，新项目总是在顶部输入，在达到最大项目数时退出(在下面的示例中为5)。
以下代码成功地为此场景执行淡出动画：
angular.module("testApp", ["ngAnimate"])
.controller("testCtrl", function($scope) {
var lastId = 0;
$scope.items = [];
$scope.add = function() {
if (!$s
浏览 0提问于2015-10-31得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
即时通信 IM
对象存储活动推荐
腾讯云开发者
