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

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 に答える
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 Google グループでスレッドを作成しました。

于 2014-02-14T10:20:31.923 に答える