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

Posted 2023-03-06

【中文标题】ng-enter 动画期间出现不需要的滚动

【英文标题】：Unwanted scroll appears during ng-enter animation

【发布时间】：2017-06-30 09:41:10

【问题描述】：

我正在使用 ng-enter/ng-leave 页面的一部分制作动画 进入屏幕时应该有“滑入”的效果。

我添加了带有愚蠢示例的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; .redbackground-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' 我们现在在动画期间也可以看到滚动。 （即使从不应该有滚动的“蓝色”切换到“绿色”）

有什么办法可以在动画期间隐藏滚动吗？

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

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