Css 在ng enter动画期间出现不需要的滚动

我正在使用ng enter/ng leave设置页面的动画，其中 进入屏幕时应具有“滑入”效果

我添加了一些愚蠢的例子来澄清这一点。 HTML:

问题是一些视图的宽度可能更大（在我的示例中是红色的），因此需要一个水平滚动。但是当添加“overflow-x:scroll”时，我们现在也可以在动画中看到滚动。（即使在从“蓝色”切换到“绿色”时，也不应该有滚动条）

我能做些什么来隐藏动画中的卷轴吗

---

或者有没有其他动画可以在没有滚动的情况下实现相同的效果？

我自己找到了解决方案

只需要在容器及其子容器之间添加另一个div（“intermediate”）。这个div仍然拥有父级的100%，所以现在溢出在他身上，而不是容器上。 因此，当切换未溢出的子项时，您不会看到滚动条

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

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

这是完整的解决方案

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

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

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

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