我正在使用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;
}
}
}
我做错了吗?
答案 0 :(得分:1)
@Claies在他的第二次评论中是正确的。
<my-directive>
不是Chrome中的已识别元素,因此它不会为您指定任何默认属性。将display: block
分配给my-directive
或.vl-fade-in-out
可以将其设置为动画。
或者您可以在replace: true
返回中使用myDirective
,以便在您的内容包含普通元素时将自定义元素替换为模板的内容。
答案 1 :(得分:0)
将restrict:'C'
与<div class="test">
一起使用。它会起作用