Question

我使用ng-enter / ng制作动画 - 留下页面的一部分应该有一个＆＃39;滑入＆＃39;进入屏幕时效果。

我已经添加了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;
}

问题是某些视图可能有更大的宽度（在我的示例中为红色），因此需要水平滚动。但是当添加＆溢出-x：滚动＆＃39; 我们现在也在动画期间看到滚动。（即使从＆＃39; blue＆＃39;切换到＆＃39; green＆＃39;它不应该滚动）

在动画中我有什么办法可以隐藏滚动吗？

或者是否有另一个动画可以在没有滚动的情况下实现相同的效果？

Answer 1

我自己找到了解决方案..

只需要在容器和它的子容器之间添加另一个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>
....

和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是完整的解决方案。

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

1 个答案: