gpt4 book ai didi

javascript - 似乎无法让 ngAnimate 在 ng-repeat 上工作

转载 作者:行者123 更新时间:2023-12-02 17:17:49 27 4
gpt4 key购买 nike

我有以下 HTML 片段:

<div ng-app ng-controller="mainCtrl">
<div ng-repeat="item in items" ng-mouseenter="item.showRemove = true" ng-mouseleave="item.showRemove = false" class="repeated-item">
<span class="remove-item glyphicon glyphicon-remove" ng-show="item.showRemove" ng-click="removeItem(item)"></span>
<div class="h3">{{item.title}}</div>
<p>{{item.description}}</p>
</div>
</div>

以下 CSS 应用于标记:

body { padding: 15px; }

.repeated-item {
padding: 10px;
margin-bottom: 15px;
border-left: solid 1px #ccc;
border-top: solid 1px #ccc;
border-radius: 10px;
background-color: #eee;
position: relative;
}

.repeated-item:hover { background-color: #ddd; }

.remove-item {
float: right;
cursor: pointer;
color: #b00;
font-size: x-large;
}

.h3 {
border-bottom: dotted 1px #bbb;
}

.repeated-item.ng-leave {
-webkit-transition:0.5s linear all;
-moz-transition:0.5s linear all;
-o-transition:0.5s linear all;
transition:0.5s linear all;
opacity:1;
}

.repeated-item.ng-leave.ng-leave-active {
opacity:0;
}

最后,我有以下 JavaScript:

function mainCtrl($scope) {
$scope.items = [
{
title: 'Star Trek: The Original Series',
description: 'brevity brevity...'
},
{
title: 'Star Trek: The Next Generation',
description: "brevity brevity..."
},
{
title: 'Star Trek: Deep Space Nine',
description: "brevity brevity..."
},
{
title: 'Star Trek: Voyager',
description: "brevity brevity..."
},
{
title: 'Star Trek: Enterprise',
description: "brevity brevity..."
}
];
$scope.removeItem = function (itemToRemove) {
var index = $scope.items.indexOf(itemToRemove);
if (index !== -1) {
$scope.items.splice(index, 1);
}
};
}

我创建这个小演示只是为了学习如何使用 ngAnimate。然而,网络上的文档似乎有点缺乏,我似乎无法弄清楚我做错了什么。我正在使用this page将淡出动画应用于 ng-repeat 中的项目。我所做的一切似乎都不起作用。我已经为重复项指定了它自己的类,并且应用了动画规则(是的,我确实包含了 ngAnimate 文件)。除了动画之外,一切正常。

我做错了什么?

Working demo on Codepen.io

最佳答案

更改<div ng-app ng-controller="mainCtrl"><div ng-app="ngAnimate" ng-controller="mainCtrl">

注意ngAnimate .

关于javascript - 似乎无法让 ngAnimate 在 ng-repeat 上工作,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/24252629/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com