Javascript 幻灯片显示角度方向的css转换

我一直在使用AngularJS中的动画功能，但我似乎无法获得所需的功能：

.box.ng-hide-add {-webkit-animation: fadeOutLeftBig 0.4s;}
.box.ng-hide-remove {-webkit-animation: fadeInRightBig 0.4s;}
.box.ng-show-add{-webkit-animation: fadeInRightBig 0.4s;}

理想情况下，当用户点击“下一步”按钮时，当前框应向左退出，而下一行框则从右侧进入，从而产生幻灯片/旋转木马效果。
但现在，这一切都来自同一方

这可能吗？我觉得我已经接近了，但我可能只是想错了。我忽略或忘记了什么

---

代码片段：

（函数（）{
var-app=angular.module（“theapp”，['ngAnimate']）；
变量控制器=函数（$scope）{
$scope.currentPage=1；
};
应用控制器（“控制器”，控制器）；
}());
.box.ng-hide-add{
-webkit动画：fadeOutLeftBig 0.4s；
}
.box.ng-hide-remove{
-webkit动画：fadeInRightBig 0.4s；
}
.box.ng-show-add{
-webkit动画：fadeInRightBig 0.4s；
}
.盒子{
高度：100px；
宽度：100px；
}
.red{背景色：红色；}
.blue{背景色：蓝色；}
.purple{背景色：紫色；}

内容
内容
内容
以前的
下一个
下面的代码符合您的要求，请参阅代码中的注释以获取解释，希望对您有所帮助。
我改为ng if，而不是ng show，以便能够在CSS中使用ng enter、ng LEVE


（函数（）{
var-app=angular.module（“theapp”，['ngAnimate']）；
变量控制器=函数（$scope，$timeout）{
$scope.currentPage=1；
$scope.numberOfPages=3；
$scope.changePage=函数（操作）{
如果（操作=='+'）{
$scope.direction='toRight'；
$timeout（函数（）{//timeout，允许在更改currentPage之前更新direction类
$scope.currentPage=$scope.currentPage<$scope.numberOfPages？$scope.currentPage+1:1；
}, 0)
}else if（action=='-'）{
$scope.direction='toLeft'；
$timeout（函数（）{//timeout，允许在更改currentPage之前更新direction类
$scope.currentPage=$scope.currentPage>1？$scope.currentPage-1:$scope.numberOfPages；
}, 0)
}
}
};
应用控制器（“控制器”，控制器）；
}());
.toRight.box.ng-enter{
-webkit动画：fadeInRightBig 0.7s；
}
.toLeft.box.ng-enter{
-webkit动画：fadeInLeftBig 0.7s；
}
.toRight.box.ng-左{
-webkit动画：淡出大0.7s；
}
.toLeft.box.ng-左{
-webkit动画：FadeOutTrightBig 0.7s；
}
.盒子{
高度：100px；
宽度：100px；
位置：绝对；/*这是为了避免动画重叠，导致奇怪的行为*/
}
.red{背景色：红色；}
.blue{背景色：蓝色；}
.purple{背景色：紫色；}

内容
内容
内容
以前的
下一个
我能看到的一件事是，
display
立即被设置为
none
，用于应该淡出的框。因此，即使动画在技术上正在发生，您也不会看到它，因为框已从页面中删除。因此，这将是我的下一步：了解如何延迟
显示：none
，直到动画完成。（请记住，我从未使用过AngularJS，但这正是我观察到的）您是否考虑过如何为“上一个”按钮设置动画？因为现在（如果你让你当前的问题工作），你会得到完全相同的动画（easeOutToLeft，easeinforomright），如果你按下“上一个”按钮。那太奇怪了…干得好，先生！你马上修复了过去的最后一页错误！