Question

在AngularJS 1.2中，如果我使用父动画，则子动画不起作用。

如果我注释掉app.animation('.parent', function () { .. }，则子动画会正确启动。

如何让父母和儿童动画同时工作？

HTML：

<button ng-click="anim.toggleParent()">reveal parent</button>
<button ng-click="anim.toggleChild()">reveal child</button>
<div class="parent" ng-if="!anim.showParent">
    <div class="child" ng-if="!anim.showChild">
    </div>
</div>

JS：

app.animation('.parent', function () {
    return {
    // ...
    };
});

// this doesn't work with parent animation =(

app.animation('.child', function () {
    return {
    // ...
    };
});

Answer 1

只需将ng-animate-children插入父级（Angular 1.2 +）。

<button ng-click="anim.toggleParent()">reveal parent</button>
<button ng-click="anim.toggleChild()">reveal child</button>
<div class="parent" ng-if="!anim.showParent" ng-animate-children>
    <div class="child" ng-if="!anim.showChild">
    </div>
</div>

查看ngAnimate文档：

请记住，默认情况下，如果动画正在运行，则在父元素的动画完成之前，不能对任何子元素进行动画处理。可以通过将ng-animate-children属性放在父容器标记上来覆盖此阻止功能。<div class="slide-animation" ng-if="on" ng-animate-children> <div class="fade-animation" ng-if="on"> <div class="explode-animation" ng-if="on"> ... </div> </div> </div>
当on表达式值更改并触发动画时，每个元素都可以在没有将块应用于子元素的情况下，将所有动画内容。

Answer 2

不确定此线程是否已关闭。如果是这样建议会非常有帮助。

这里遇到同样的问题。

角度动画具有以下行，表示如果父有动画，则不会触发子动画。

不确定这是一个问题还是按预期工作。

    //skip the animation if animations are disabled, a parent is already being animated,
    //the element is not currently attached to the document body or then completely close
    //the animation if any matching animations are not found at all.
    //NOTE: IE8 + IE9 should close properly (run closeAnimation()) in case a NO animation is not found.
    if (animationsDisabled(element, parentElement) || matches.length === 0) {
      domOperation();
      closeAnimation();
      return;
    }

在Angular google group中引发了一个帖子，引用了这个问题。

Answer 3

也不确定此线程是否已关闭，但您始终可以编辑angular-animate.js文件。函数animationsDisabled是angular查找父元素的位置，以查看它是否允许子动画。在这个函数的顶部，我添加了一个检查，看看父元素是否有一个动画覆盖类（可以是你定义的任何东西）。这样，您可以在需要时覆盖默认功能。

function animationsDisabled(element, parentElement) {
    if (parentElement[0].classList.contains('animation-override')) return false;

    if (rootAnimateState.disabled) return true;

    if(isMatchingElement(element, $rootElement)) {
      return rootAnimateState.disabled || rootAnimateState.running;
    }

    do {
      //the element did not reach the root element which means that it
      //is not apart of the DOM. Therefore there is no reason to do
      //any animations on it
      if(parentElement.length === 0) break;

      var isRoot = isMatchingElement(parentElement, $rootElement);
      var state = isRoot ? rootAnimateState : parentElement.data(NG_ANIMATE_STATE);
      var result = state && (!!state.disabled || !!state.running);

      if(isRoot || result) {
        return result;
      }

      if(isRoot) return true;
    }
    while(parentElement = parentElement.parent());

    return true;
  }
}]);

AngularJS 1.2中的ngAnimate parent vs child

3 个答案: