Angular：ng-if 动画不适用于指令答案

【问题标题】：Angular: ng-if animation not working on directiveAngular：ng-if 动画不适用于指令
【发布时间】：2015-06-18 08:06:07
【问题描述】：

我正在使用 Angular 1.3 和 animate.css。

我正在尝试在使用此代码的指令上应用简单的淡入/淡出动画：

.vl-fade-in-out{
    &.ng-enter{
        animation: fadeIn 1s;
    }

    &.ng-leave{
        animation:  fadeOut 1s;
    }

}

但是没有应用动画，但是，如果我直接在 html 元素（如 div）上使用相同的动画，它会应用。

//this is not animating
<my-directive class="vl-fade-in-out" ng-if="show"></my-directive>
//this is animating
<div class="vl-fade-in-out" ng-if="show"></div>

此外，如果我使用过渡应用淡入/淡出效果，即使在指令上应用它也可以：

.vl-fade-in-out{
    &.ng-enter{
        transition:1s linear all;
        opacity: 0;

        &.ng-enter-active{
            opacity: 1;
        }
    }

    &.ng-leave{
            transition:1s linear all;
            opacity: 1;
        &.ng-leave-active{
            opacity: 0;
        }
    }


}

我做错了吗？

笔：http://codepen.io/anon/pen/aOLzGE

【问题讨论】：

该类被分配给指令元素，不能动画，而不是模板中的<p>。
话虽如此，它似乎在 IE 中可以正常动画，但在 Chrome 中却不行，这可能是由于浏览器处理无法识别的 HTML 元素的方式不同。
@Claies - 但是，正如我在问题的最后一部分中指出的那样，过渡确实有效

标签： angularjs animate.css

【解决方案1】：

@Claies 在他的第二条评论中是对的。

<my-directive> 不是 Chrome 中可识别的元素，因此它不会为其分配任何您所期望的默认属性。将display: block 分配给my-directive 或.vl-fade-in-out 将使其具有动画效果。

或者，如果您的内容包含普通元素，您可以在 myDirective 返回中使用 replace: true，以便将自定义元素替换为模板的内容。

【讨论】：

【解决方案2】：

将restrict:'C' 与<div class="test"> 一起使用。它会工作

【讨论】：