ngAnimate parent vs child in AngularJS 1.2

ngAnimate parent vs child in AngularJS 1.2

本文关键字：AngularJS in child parent vs ngAnimate      更新时间：2023-09-26

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

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

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

在这里面临同样的问题。

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

也不确定此线程是否已关闭，但您可以随时编辑角度动画.js文件。 函数 animationsDisabled是角度查找父元素以查看它是否允许子元素进行动画处理的地方。在这个函数的顶部，我添加了一个检查，以查看父元素是否具有动画覆盖类（可以是你定义的任何内容）。这样，您可以在需要时覆盖默认功能。

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;
  }
}]);
相关文章：