5

这是代码笔http://codepen.io/lakhan/pen/cukyL

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

4

3 回答 3

14

这是一个代码笔，它可以做我认为你想要的：http ://codepen.io/anon/pen/ijLFq

AngularJS >= 1.2 不再支持 ng-animate 指令。对于ng-show基于动画，您必须使用ng-hide-add, ng-hide-removeCSS 类而不是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 过渡、变换、动画、过滤器等等！帮了我很多。

于 2014-06-30T11:59:09.393 回答
7

对于我的用例来说，接受的答案有点复杂，我无法让它工作。我只是想让一个元素在显示时向上滑动，在隐藏时向后滑动。以下是最终为我工作的方法，以防它帮助另一个迷失的灵魂：

.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;
}
于 2014-09-11T20:21:21.430 回答
0

我刚刚查看了 animate 的 ionic.app.css 文件，并找到了一些预制类。我测试了一对，发现它们在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。

于 2016-04-14T19:45:22.450 回答