1

在 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 {
    // ...
    };
});
4

3 回答 3

2

只需插入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表达式值发生变化并触发动画时，其中的每个元素都将进行动画处理，而不会将块应用于子元素。

于 2014-08-07T13:14:05.480 回答
0

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

在这里面临同样的问题。

Angular animate 有以下几行表示如果父级有动画，则不会触发子级动画。

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

    //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 谷歌组中提出了一个线程，在此处引用了该问题。

于 2014-02-14T10:20:31.923 回答
0

也不确定该线程是否已关闭，但您始终可以编辑 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;
  }
}]);
于 2014-05-01T18:42:44.027 回答