Angular:ng-if动画不适用于指令

时间:2015-06-18 08:06:07

标签: angularjs animate.css

我正在使用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

2 个答案:

答案 0 :(得分:1)

@Claies在他的第二次评论中是正确的。

<my-directive>不是Chrome中的已识别元素,因此它不会为您指定任何默认属性。将display: block分配给my-directive.vl-fade-in-out可以将其设置为动画。

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

答案 1 :(得分:0)

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