使用IONIC中的ng-show进行幻灯片切换

Question

这是codepen http://codepen.io/lakhan/pen/cukyL

我有一个带有ng-repeat的项目列表,我一次显示一个项目.单击下一步显示列表中的下一个项目.现在,当我点击下一个时,我想要实现的是项目上的幻灯片转换.我方缺少CSS方面的东西.任何帮助将不胜感激.

Answer 1

这是一个codepen,我认为你想做什么:http://codepen.io/anon/pen/ijLFq

AngularJS> = 1.2中不再支持ng-animate指令.而对于ng-show基于动画,你必须使用ng-hide-add,ng-hide-removeCSS类不中描述的CSS类ngRepeat的文档.有关详细说明,请参阅:http://www.yearofmoo.com/2013/08/remastered-animation-in-angularjs-1-2.html#animating-ngshow-and-ng-hide

为了达到预期的效果,我不得不使用CSS3动画.使用CSS3过渡时,我无法重新创建效果,因为滑动到左侧并从右侧滑入无法使用提供的动画助手类的tranisitons建模.

理解CSS3动画和过渡以及它们之间的差异很难理解.网站CSS3过渡,变换,动画,过滤器等等!帮了我很多忙.

Answer 2

对于我的用例,接受的答案有点复杂,我无法使其正常工作.我只是希望一个元素在显示时向上滑动,并在隐藏时向下滑动.这是最终为我工作的东西,以防它帮助另一个失去的灵魂:

.item-animate.ng-hide {
  height:0;
  opacity:0;
  padding:0;
}

.item-animate.ng-hide-remove,
.item-animate.ng-hide-add {
  display: block !important;
  transition: all linear 300ms;
}