ng-animate 不适用于 ng-show

Question

我的 ng-view 上有 ng-animate；但是，我似乎无法让它为 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;  
}

Answer 2

我认为你需要css这样的改变

#content.ng-hide-add.ng-hide-add-active,
#content.ng-hide-remove.ng-hide-remove-active {
  -webkit-transition: all linear 0.5s;
  transition: all linear 0.5s;
  line-height: 20px;
  padding: 6px;
}

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

Working Plunkr

ng-animate 不适用于 ng-show

ng-animate not working with ng-show

html

javascript

angularjs

ng-animate