ngAnimate父母与孩子在AngularJS 1.2

在AngularJS 1.2中，如果我使用父级动画，子级动画不起作用。ngAnimate父母与孩子在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 { 
    // ... 
    }; 
});

来源

2013-10-21 Tashiro

不知道这个线程是否关闭。如果这样的推荐将非常有帮助。

面对同样的问题在这里。

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 group在此处引用了该问题。

来源

2014-02-14 10:20:31 satlead

还不确定此线程是否已关闭，但您始终可以编辑angular-animate.js文件。 Function 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; 
    } 
}]);

来源

2014-05-01 18:42:44 Alex

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

<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-07 13:14:05 user3918540

ngAnimate父母与孩子在AngularJS 1.2

回答

相关问题