Question

我正在使用ngAnimate和ui-router来处理状态之间的动画。在我看来，你只能通过在具有ui-view属性的元素上设置过渡属性来触发ngAnimate（即使你可能不是动画那个元素本身，但也许是子元素）。

对我来说，问题是我只希望某些模板中的某些子元素实际上是动画的。当然，这在某种程度上是可行的，但由于我必须在ui-view元素上设置转换持续时间，所以所有状态在此持续时间内会发生“滞后”，即使动画的子元素不存在也是如此在当前状态。

下面，我已经包含了我正在处理的代码。请注意，我不想为.container本身设置动画，而是.child：

.child {
  transition: opacity 0.4s, transform 0.4s;
}

.container[ui-view].ng-enter,
.container[ui-view].ng-leave {
  transition-duration: 0.4s; // Needed for ngAnimate to trigger

  .child {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

.container[ui-view].ng-enter-active
{
  .child
  {
    transform: translate3d(30px, 0, 0);
    opacity: 0;
    transition: opacity 0, transform 0;
  }
}

.container[ui-view].ng-leave-active
{
  .child
  {
    transform: translate3d(-30px, 0, 0);
    opacity: 0;
  }
}

现在，我的问题是：说我在两个状态之间切换，模板甚至没有.child元素，.container仍将是“动画”（即它实际上不会动画任何东西，但ngAnimate会暂停最终动画的过渡时间）。无论如何，如果子元素具有过渡属性，我只能进行动画处理吗？

Answer 1

您可以添加＆lt; style＆gt;要在视图中禁用动画的标记：

<style>
    main.ng-enter { 
        transition: 0.001s;
    }
</style>

我使用'0.001s'，因为将其设置为'0'或'none'似乎会禁用所有视图的过渡。

我已创建了一个插件，显示此工作在http://plnkr.co/edit/gbMHlY?p=preview，有两个标签，其中只有第一个标签有淡入淡出过渡。

plunk是从我刚发布的tutorial on ngAnimate with UI Router分叉的。

ui-router动画仅适用于某些元素

1 个答案: