角动画不起作用

我试图在一个div上使用动画显示，角动画不起作用

<div class="animate-show title span3" ng-show="status.processing" ng-bind="status.message" > 

     </div>

和CSS有

.animate-show.ng-hide-add.ng-hide-add-active, .animate-show.ng-hide-remove.ng-hide-remove- active { 
-webkit-transition: 1s linear all; 
-moz-transition: 1s linear all; 
-ms-transition: 1s linear all; 
-o-transition: 1s linear all; 
transition: 1s linear all; 
} 

.animate-show.ng-hide { 
line-height:0; 
opacity:0; 
padding:0 10px; 
} 

.animate-show { 
line-height:20px; 
opacity:1; 
padding:10px; 
    }

任何建议，为什么这是不行的？我看到我的div显示和隐藏，但没有运行动画。

来源

2014-10-03 Chen Kinnrot

转换必须位于根元素上。 – 2014-10-03 12:32:03

为什么不使用ngClass然后将动画绑定到该类？ https://docs.angularjs.org/api/ng/directive/ngClass – peinearydevelopment 2014-10-03 13:58:19

我想你不能使用转换将'display'说成''''block'。编辑：哎呀，对不起，我的坏，没有注意到CSS – skip405 2014-10-03 15:21:22

我认为你需要在你的CSS中添加ng-enter/ng-leave类。此外，发生任何动画之前定义的动画放映的过渡状态，因此删除喜欢的东西ng-hide-add.ng-hide-add-active

尝试：

.animate-show{ 
    -webkit-transition: 1s linear all; 
    -moz-transition: 1s linear all; 
    -ms-transition: 1s linear all; 
    -o-transition: 1s linear all; 
    transition: 1s linear all; 
} 

.animate-show.ng-hide 
.animate-show.ng-leave { 
    line-height:0; 
    opacity:0; 
    padding:0 10px; 
} 

.animate-show, 
.animage-show.ng-enter, 
.animage-show.ng-move { 
    line-height:20px; 
    opacity:1; 
    padding:10px; 
}

如果你不想使用NG-显示，这里有一个例子它使用ng-class：http://plnkr.co/edit/FQDRUkSoellXEFMET33z?p=preview

来源

2014-10-03 15:43:24 SoluableNonagon

嗨，我看到你的例子工作。但由于某种原因不适合我。 – 2014-10-04 22:21:07

我看到，由于某种原因，如果我用ng-hide代替ng显示，我可以看到div多一点时间，为什么？ – 2014-10-04 22:22:47

角动画不起作用

回答

相关问题