ng-enter動畫中出現不需要的滾動

Question

我正在使用ng-enter/ng離開頁面的動畫，其中 在進入屏幕時應該具有「滑入」效果。

我已經添加jsfiddle愚蠢的例子只是爲了清除這一點。 HTML：

<div class="container" ng-switch on="color"> 
     <div class="{{color}} son" ng-switch-when="blue"> 
     {{color}} 
     </div> 
     <div class="{{color}} son big" ng-switch-when="red"> 
      {{color}} 
     </div> 
     <div class="{{color}} son" ng-switch-when="other"> 
      {{color}} 
     </div> 

</div> 

和CSS是：

.container{ 
    width:300px; 
    height:350px; 
    background-color:white; 
    border:2px solid black; 
    overflow-x:auto; 
    overflow-y:hidden; 
} 
.son{ 
    width:300px; 
    position:relative; 
    top:0; 
    right:0; 
    height:100% 
} 
.big{ 
    width:400px; 
} 
.blue{ background-color:blue;} .red{background-color:red;} 
.other{ background-color:green;} 
.son.ng-enter { 
    -webkit-transition: 1s linear all; 
    z-index:100; 
    right:-300px; 
} 
.son.ng-enter.ng-enter-active { 
    right:0; 
} 
.son.ng-leave { 
    -webkit-transition: 0.5s linear all; 
} 
.son.ng-leave.ng-leave-active{ 
    z-index:10; 
    right:-300px; 
} 

的問題是，一些觀點可具有更大的寬度（紅色的一個在我的例子），所以需要水平滾動。但是當添加'overflow-x：scroll'時，我們現在也在動畫期間看到滾動。 （即使從「藍色」切換到「不應該有滾動」的「綠色」）

在動畫過程中，我可以做些什麼來隱藏滾動嗎？

或者是否有另一個動畫可以實現相同的影響沒有滾動？

Answer 1

我已經找到了解決自己..

只需要在容器之間添加一個DIV（「中間」）和它的孩子。這個div仍然有100％的父母，所以現在溢出在他身上，而不是在容器上。 從而切換孩子不漫過你沒有看到滾動..

<div class="container" ng-switch on="color"> 

     <div class="intermediate" ng-switch-when="blue"> 
     <div class="{{color}} son" > 
     {{color}} 
     </div> 
     </div> 
.... 

和CSS時：

.container{ 
    width:300px; 
    height:350px; 
    background-color:white; 
    border:2px solid black; 
    overflow-x:hidden; 
    overflow-y:hidden; 
} 
.intermediate{ 
    width:100%; 
    height:100%; 
    position:relative; 
    top:0; 
    right:0; 
    overflow-x:auto; 
} 

Here是完整的解決方案。