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

I have a nested state like:

我有一个嵌套状态,如:

.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>

contacts-view.html

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

I'm able to animate the contacts-view.html ng-enter and ng-leave events but what I wanted was to animate the #contacts-list container in order to make a slide to right effect.

我能够为contacts-view.html ng-enter和ng-leave事件设置动画,但我想要的是设置#contacts-list容器的动画,以便使幻灯片正确生效。

What would be the proper way to approach this?

接近这个的正确方法是什么?

Thanks

1 个解决方案

#1

You could try:

你可以尝试:

Replace contacts-view.html with:

将contacts-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>

and in your contacts.html write:

并在您的contacts.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>

That should do the trick if you don't mind code repetition in your templates.

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

Edit:

I understand now what you want to do a bit more:

我现在明白你想做些什么了:

What about:

<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>

And then you add the add/remove animation classes to the detail class. That should work without the need of repetition or adding/removing unnecessary elements to the DOM.

然后将添加/删除动画类添加到详细信息类。这应该可以在不需要重复或向DOM添加/删除不必要的元素的情况下工作。

#1