Question

我的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

注意：我将其更改为5秒，因此您可以在隐藏时看到不透明度为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

我认为你需要像这样改变

#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

2 个答案: