javascript - ng-animate 不与 ng-show 一起使用

Question

我有 ng-animate 在我的 ng-view 上工作；但是，我似乎无法让它为 ng-show 工作。我想淡入 ng-view 内的一个子部分。

这是我的 html:

<section id="content" ng-show="!isSpanish">   
   <item-list page="page" is-spanish="isSpanish" info="info" list="list" api="api" objects="objects"></item-list>
   <item-content page="page" staff="staff" info="info" blog-items="list" list="objects" api="api" overview="filteredOverview" is-spanish="isSpanish" partner="partner"></item-content>
</section>

这是我的 CSS:

#content.ng-hide-add.ng-hide-add-active,
#content.ng-hide-remove.ng-hide-remove-active {
  -webkit-transition: all linear 5s;
  transition: all linear 5s;
}

有什么因素会阻止其正常工作吗？

Answer 1

My Solution in Daniles plunkr

注意:我将其更改为 5s，以便您可以看到隐藏时不透明度为 0 的效果。 nganimate 通过显示将其切换为 1，反之亦然。一旦您看到这一点，您就可以自由更改其他转换属性。

试试这个，在你的CSS下面添加这个:

#content.ng-hide-add.ng-hide-add-active,
#content.ng-hide-remove.ng-hide-remove-active {
   -webkit-transition: all ease-in-out 5s;
   -moz-transition: all ease-in-out 5s;
   -ms-transition: all ease-in-out 5s;
   -o-transition: all ease-in-out 5s;
    transition: all ease-in-out 5s;  
}

#content.ng-hide {     
   line-height: 20px;
   -ms-opacity: 0;
   opacity: 0;
   padding: 0 0px;  
}