Question

以下是codepen http://codepen.io/lakhan/pen/cukyL

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

Answer 1

这是一个代码集，我认为你想做什么：http://codepen.io/anon/pen/ijLFq

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

为了获得理想的效果，我不得不使用CSS3动画。使用CSS3过渡时，我无法重新创建效果，因为滑动到左侧并从右侧滑入无法使用提供的动画助手类的tranisitons建模。

了解CSS3动画和过渡以及它们之间的差异很难理解。网站CSS3 Transitions, Transforms, Animation, Filters and more!帮助了我很多。

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;
}

Answer 3

我刚看了ionic.app.css文件中的animate并找到了一些预先制作的类。我测试了一对，发现item-remove-animate做了很好的动画ng-show / ng-hide。你也可以自己想象并自己写一些过渡，但对我来说，这就是你的工作。

只需将item-remove-animate课程添加到您尝试隐藏或展示的div中。

以下是相关代码：

<div class="view-mode item-remove-animate" ng-show="!editOn">

<div class="edit-mode item-remove-animate" ng-show="editOn">

这是已经包含在您的项目中的CSS。

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

3 个答案: