gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-11-28 11:03:49 25 4
gpt4 key购买 nike

我正在使用 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;} .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;
}

问题是一些 View 可能有更大的宽度(在我的例子中是红色的),所以需要水平滚动。但是当添加'overflow-x:scroll'时我们现在在动画期间也能看到滚动。 (即使从不应该有卷轴的“蓝色”切换到“绿色”)

我能做些什么来隐藏动画期间的滚动条吗?

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

最佳答案

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

只需要在容器和它的子元素之间添加另一个 div(“中间”)。这个 div 仍然有 100% 的父级,所以现在溢出在他身上,而不是在容器上。因此当切换不溢出的 child 时你看不到滚动..

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

关于css - 在 ng-enter 动画期间出现不需要的滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42186522/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com