如何使用CSS和AngularJS正确模拟移动应用程序幻灯片视图

Question

以下是我在研究和更改后所做的工作：演示

.cube {
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    transform-style: preserve-3d;
    position: absolute;
    display: inline;
}
.container1 {
    display: inline;
}
.container2 {
    display: inline;
}
.animate-enter, 
.animate-leave { 
    -webkit-transition: 1s all ;
    -moz-transition: 1s all ;
    -o-transition: 1s all ;
    transition: 1s all ;
    position: relative;
}
.animate-enter {
    left: 100%;
}
.animate-enter.animate-enter-active {
    left: 0;
}
.animate-leave {
    left: 0;
    display: inline;
}
.animate-leave.animate-leave-active {
    left: -100%;
}

1.但是仍然存在一个问题，两个div不在一条线上。我试图将display:内联到.cube和.contator类，但没有帮助。*我想要的是让第2页出现在第1页的旁边，然后它们一起滑动，就像移动滑动视图一样。我不想像大多数横幅那样把这些观点组合成一个整体

2.现在我只设置了向左滑动的"进入"one_answers"离开"动画。如何在.cubediv中提供另一个"输入"one_answers"离开"动画？例如，第1页向左滑动可离开，第2页向右滑动可进入。我还想提供另一个按钮，它将有第3页向右滑动离开，第1页从右边滑入进入。我该怎么做？

感谢

Answer 1

为.contaner1和.contaner2添加浮点值解决了第一个问题。

Answer 2

1. 放置位置：绝对进入。动画进入和位置：相对进入。动画离开解决了第一个问题

并且还设置具有浮子的容器-@eRIZ

1. 将动画设置为变量，并将布尔值传递给javascript以设置动画