javascript - Angular 1.2 基于类应用动画

Question

我制作了一个用作过滤器的 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 动画吗？

提前谢谢你，丹尼尔。

Answer 1

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