ngAnimate 翻转动画答案

【问题标题】：ngAnimate Flip AnimationngAnimate 翻转动画
【发布时间】：2016-05-21 10:26:41
【问题描述】：

我花了最后 5 个小时试图让这个动画正常工作，但没有成功。我想在用户单击按钮时创建一个很酷的动画，想法是在翻转动画中显示 ul 元素列表，就像http://lab.hakim.se/scroll-effects/mobile.html 正在做的事情（如果您从齿轮图标中选择翻转并更改chrome 设备模式到移动设备）。

我正在使用 ngAnimate 以及 Angular 和 Ionic，我在这里创建了 sn-p http://play.ionic.io/app/4ae65754fc64（尝试单击“添加到购物车”按钮）。我想显示每个 li 项目，就像它们在显示时翻转和级联一样。由于某种原因，所有分类的动画都被忽略了。

【问题讨论】：

请提供一个类似于您的链接的小提琴，其中至少将项目添加并显示在没有动画的屏幕上，以便人们可以专注于您的动画问题。您的链接无法使用。
@floribon 是的，您只需单击“添加到购物车”按钮，列表就会显示出来
我的错！我以为你想为即将到来的项目制作动画，而不是数字图块，很抱歉，请忽略我的评论。
你想在翻转动画中显示 1,2,3,4,5 对吧？
@PareshGami 没错，每毫秒都有延迟

标签： angularjs ionic-framework ng-animate

【解决方案1】：

好的，我想我实现了您想要实现的目标。我在下面为您提供了两个演示。

但首先，AngularJS >= 1.2 不再支持 ng-animate 指令。对于基于 ng-show 的动画，您必须使用 ng-hide-add、ng-hide-remove CSS 类，而不是 ngRepeat 文档中描述的 CSS 类。

ionic 演示（下面的第一个链接）基本上只是代码的模型，无论如何都不完美。

codepen 演示是经过修改的示例和通用示例。我使用<ion-list> 和<ion-item> 而不是<ul> 和<li>。

希望这能让您在实施最终解决方案时找到正确的方向。

Ionic 演示：http://play.ionic.io/app/3c0e90238fe8

Codepen 演示（更通用）：http://codepen.io/thepio/pen/KMPeZo

【讨论】：