css - AngularJS 中的立方体动画

Question

我用过 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. 当从 Pane 1 移动到 Pane 3 时，它应该经过 Pane 2。我做了一个循环，首先将选定的 Pane 更改为 #2，然后更改为 #3，但动画直接转到 #3。有没有一种方法可以“等待”，直到过渡到 #2 完成，然后再转到 #3 ？

2. 我在固定大小的立方体控件时遇到问题。如果您在上面的示例中添加另一个 cube-viewer，您会看到它们重叠。

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

谢谢。

Answer 1

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

   使用 $timeout，遍历 View ，直到达到正确的目标，即 500 毫秒。

2. 移除固定的。

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