父视图上的Angular UI路由器动画

Question

我有一个嵌套状态,如:

.state('contacts', {
    url: '/contacts',
    views: {
        '': {
            templateURL: 'views/contacts.html',
            contacts: 'ContactsCtrl'
        }
    }
})
.state('contacts.view', {
    url: '/contacts/:name',
    views: {
        '': {
            templateURL: 'views/contacts-details.html'
        }
    }
});

contacts.html

<section id="contacts-list">
    <h1>This is a list of contacts</div>
    <article class="contacts" ng-repeat="contact in contacts">(...)</article>
    <ui-view/>
</section>

联系人-view.html

<h2>{{ contact.name }}</h2>

我能够设置contacts-view.html ng-enter和ng-leave事件的动画,但我想要的是为#contacts-list容器设置动画,以使幻灯片向右移动.

什么是正确的方法来解决这个问题？

谢谢

Answer 1

你可以尝试：

将 contact-view.html 替换为：

<section id="contacts-list">
    <h1>This is a list of contacts</div>
    <article class="contacts" ng-repeat="contact in contacts">(...)</article>
    <h2>{{ contact.name }}</h2>
</section>

并在 contact.html 中写入：

<section id="contacts-list" ui-view>
    <h1>This is a list of contacts</div>
    <article class="contacts" ng-repeat="contact in contacts">(...)</article>
</section>

如果您不介意模板中的代码重复，那么这应该可以解决问题。

编辑：

我现在明白你还想做什么：

关于什么：

<section id="contacts-list" ng-class="{ detail: $state.is('contacts.view')>
    <h1>This is a list of contacts</div>
    <article class="contacts" ng-repeat="contact in contacts">(...)</article>
    <ui-view />
</section>

然后将添加/删除动画类添加到细节类中。这应该可以工作，而不需要重复或向 DOM 添加/删除不必要的元素。