javascript - Angular JS 动画不工作

Question

我正在尝试在 Angular js 中显示/隐藏详细信息字段。细节显示和隐藏，但不知为何没有动画。

<div class="directoryEntry" ng-repeat="listing in listings">
        <span class="category">{{listing.category}}</span>
                    ...
        <a ng-click="sElement = $index" href="javascript:void(0)">Member Details ></a>
        <div ng-show="$index == sElement" ng-animate="{show: 'details-show', hide: 'details-hide'}">{{listing.details}}</div>
    </div>

这是 CSS:

.details-show, .details-hide {
-webkit-transition:all linear 0.5s;
-moz-transition:all linear 0.5s;
-ms-transition:all linear 0.5s;
-o-transition:all linear 0.5s;
transition:all linear 0.5s;
}

.details-show.details-show-active,
.details-hide {
opacity:1;
}

.details-hide.details-hide-active,
.details-show {
opacity:0;
}

Answer 1

首先确保在您的应用程序中包含 ngAnimation 模块。您应该添加 correct script在您的 HTML 中，并在您的应用程序模块声明中要求它，如下所示:

angular.module('yourApp', ['ngAnimate']);

您还应该为动画使用 .ng-hide-add 和 .ng-hide-remove。要获得更多信息，您可以引用 AngularJS 文档中的这个示例:https://docs.angularjs.org/api/ng/directive/ngShow#usage_animations