Angular 1.2 基于类应用动画答案

【问题标题】：Angular 1.2 apply animation based on classAngular 1.2 基于类应用动画
【发布时间】：2020-06-20 19:22:34
【问题描述】：

我制作了一个用作过滤器的 HTML 布局，我的 HTML 看起来像这样：

<div class="filter">
    <small>User</small>
    <em ng-bind="filter.name">All Users</em>
    <nav>
        <a class="selected" ng-click="filter={name: 'All Users', filter: ''}">All Users</a>
        <hr>
        <a ng-click="filter={name: 'Person1', filter: 'Person1'}">Person1</a>
        <a ng-click="filter={name: 'Person2', filter: 'Person2'}">Person2</a>
        <a ng-click="filter={name: 'Person3', filter: 'Person3'}">Person3</a>
    </nav>
</div>

现在我的方法是创建一个指令，当我按下过滤器时，它会在过滤器类附近添加一个活动类，并且在应用活动类时使用 CSS，我会显示

.filter nav {
    display: none;
}
.filter.active nav {
    display: block;
}

我的问题是：有什么方法可以显示/隐藏使用 Angular 1.2 动画库动画的导航 div？

提前谢谢你，丹尼尔。

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

您可能想要查看ngAnimate 文档隐藏/显示动画（以及其他动画）几乎是免费的。您只需要引用 ngAnimate，注入 $animate 并添加进入/离开 css 样式。

【讨论】：