Html CSS滑入和滑出动画溢出问题

我试图在屏幕外设置一个瓷砖列表的动画，同时在屏幕上设置一个新的瓷砖列表的动画

我使用Angular的ng for循环遍历一组可见项，因此技术上只有一个列表，但Angular的ngAnimate模块在动画完成之前保持被逐出的项处于活动状态

我的问题是，无论是在动画的中间，同时在屏幕上同时显示两个瓦片列表，一个都溢出并结束于另一个。p> 这就是正在发生的事情：

这就是我想要它做的：

我尝试过处理CSS转换、绝对定位，但我似乎做不好

下面是一个工作示例：

作用{ var app=angular.moduleanimationApp[ngAnimate]； app.controller'FrameController'，['$scope'， 函数$scope{ $scope.message='Hello world'； $scope.items=[]； $scope.visibleItems=[]； 对于变量i=3；i<9；i++{ $scope.items.push{ 名称：'项目'+i-2， 颜色：+i+0+i%5+0+i%4+“0” }; } $scope.firstThree=true； $scope.selectNextItems=函数{ 如果$scope.firstThree{ $scope.firstThree=false； $scope.visibleItems=[$scope.items[0]、$scope.items[1]、$scope.items[2]； }否则{ $scope.firstThree=true； $scope.visibleItems=[$scope.items[3]、$scope.items[4]、$scope.items[5]； } } $scope.selectNextItems； } ]; } .物品容器{ 宽度：400px； 边框：1px纯红； 溢出：隐藏； } .项目{ 颜色：白色； 宽度：100px； 高度：150像素； 边框：5px实心F3F5F6； 显示：内联块； 位置：相对位置； 光标：指针； } .项目：悬停{ 填充：2px； 边框：3件纯蓝； } /*动画*/ .第5.ng项-移动， .item.ng-enter， .第1.5项-休假{ -webkit过渡：1400ms立方贝塞尔0.250、0.250、0.750、0.750全部； -moz过渡：1400ms立方贝塞尔0.250、0.250、0.750、0.750全部； -ms转换：1400ms立方贝塞尔0.250、0.250、0.750、0.750全部； -o型过渡：1400ms立方贝塞尔0.250、0.250、0.750、0.750全部； 过渡：1400ms立方贝塞尔0.250、0.250、0.750、0.750全部； } .item.ng-enter， .item.ng-move{ 左-100%； } .item.ng-enter.ng-enter-active， .item.ng-move.ng-move-active{ 左：0； } .第1.5项-休假{ 右：0； } .item.ng-leave.ng-leave-active{ 右图：-100%； } 下一页 {{item.name}

---

您所面临的问题是因为内容被包装在父容器中。父容器的宽度仅为400px，但每个框的边框宽度为100px+2*5px。因此，同一条生产线只能装3个箱子，其余的必须绕到下一条生产线。当您同时显示所有6个元素时，可以非常清楚地看到这一点。正如您在下面的代码片段中所看到的，最后3项环绕到下一行

注意：我对AngularJS一无所知，所以请原谅我在让所有六个同时可见方面的拙劣尝试

作用{ var app=angular.moduleanimationApp[ngAnimate]； app.controller'FrameController'，['$scope'，function$scope{ $scope.message='Hello world'； $scope.items=[]； $scope.visibleItems=[]； 对于变量i=3；i<9；i++{ $scope.items.push{ 名称：'项目'+i-2， 颜色：+i+0+i%5+0+i%4+“0” }; } $scope.firstThree=true； $scope.selectNextItems=函数{ 如果$scope.firstThree{ $scope.firstThree=false； $scope.visibleItems=[$scope.items[0]、$scope.items[1]、$scope.items[2]、$scope.items[3]、$scope.items[4]、$scope.items[5]； }否则{ $scope.firstThree=true； $scope.visibleItems=[$scope.items[3]、$scope.items[4]、$scope.items[5]； } } $scope.selectNextItems； }]; } .物品容器{ 宽度：400px； 边框：1px纯红； 溢出：隐藏； } .项目{ 颜色：白色； 宽度：100px； 高度：150像素； 边框：5px实心F3F5F6； 显示：内联块； 位置：相对位置； 光标：指针； } .项目：悬停{ 填充：2px； 边框：3件纯蓝； } /*动画*/ .第5.ng项-移动， .item.ng-enter， .第1.5项-休假{ 过渡：1400ms立方贝塞尔0.250、0.250、0.750、0.750全部； } .item.ng-enter， .item.ng-move{ 左-80%； } .item.ng-enter.ng-enter-active， .item.ng-move.ng-move-active{ 左：0%； } .第1.5项-休假{ 右：0%； } .item.ng-leave.ng-leave-active{ 右图：-100%； } 下一页 {{item.name} 空白：我需要的是nowrap。我将更多地使用动画。我给出的400px示例只是为了确保该示例在所有屏幕尺寸上都显示了问题。我的实际项目容器将是100%的宽度，所以我将不得不与我如何得到的项目动画的创意离开 屏幕谢谢你的帮助！