AngularJS 中的立方体动画答案

【问题标题】：Cube animation in AngularJSAngularJS 中的立方体动画
【发布时间】：2014-01-12 11:45:43
【问题描述】：

我使用this question 创建了一个立方体控件。

This is我到目前为止所得到的。

我正在使用ng-if 和ng-include 来触发动画

<div ng-repeat='view in views' class='cube container'>
    <div ng-if='view.name == selected' " + 
            ng-include='view.template' " + 
            ng-animate="{enter: 'animate-enter',
                            leave: 'animate-leave'}"> 
    </div>
</div>

我有两个问题

当从窗格 1 移动到窗格 3 时，它应该经过窗格 2。我创建了一个循环，首先将选定窗格更改为 #2，然后更改为 #3，但动画直接转到 #3。有没有办法“等待”直到过渡到 #2 完成后再转到 #3 ？
我无法使立方体控件的大小固定。如果您在上面的示例中添加另一个cube-viewer，您会看到它们重叠。

我的目标是纯 CSS 解决方案（没有关键帧也没有 java 脚本/jquery 动画）

谢谢。

【问题讨论】：

标签： css angularjs animation

【解决方案1】：

在 goTo() 方法中使用 goTOPrev()、goTONext() 方法。

使用 $timeout 遍历视图，直到到达正确的目标，即 500 毫秒。
删除固定。

style="/* position:fixed; */ display:block; width:450px; padding:0; margin:0; border:1px solid #EEE;" ...

【讨论】：

感谢您的回复 - 我尝试了您的解决方案 1，它可以正常工作，但并不像我希望的那样顺利，您还有其他建议吗？大约2，它不起作用。 jsfiddle.net/bnyJ6/138
大约 2，它按我的预期工作。我分别在顶部和底部看到两个视图。如果你想看到那些左/右，使用 float:left
问题是在动画过程中外框收缩导致两个立方体重叠。
因为没有设置高度，所以是自动的。添加此“高度：470px；”不会让它与动画折叠。
关于#1，我不知道你想要什么。这完全取决于你。您可以增加超时，或重新组织超时以调用超时。