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; 
} 

問題は、ビューのいくつかは大きな幅（私の例では、赤1）、その水平方向のスクロールが必要とされているを持っているかもしれないということです。 '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は完全なソリューションです。