如何在不推动页面边缘的情况下将元素向右补间？答案

【问题标题】：How can I Tween an element to the right without pushing the page edge?如何在不推动页面边缘的情况下将元素向右补间？
【发布时间】：2014-03-11 10:05:26
【问题描述】：

我有一个由 4 个圆圈组成的徽标。我的 HTML 将这些作为单独的圆圈，而我正在尝试做的是......

当页面加载时，所有圆圈开始居中并重叠。动画立即将圆圈向左和向右扩展，使它们仅略微重叠。问题是移动到右边的元素将页面的边缘推到右边，这样用户就可以滚动到右边，除了空白什么都看不到。

我正在使用 TweenMax 库。

这是我的 HTML

<div class="container">
    <div class="logo_circles" id="logo1"><img src="img/logo_01.png"></div>
    <div class="logo_circles" id="logo3"><img src="img/logo_03.png"></div>
    <div class="logo_circles" id="logo2"><img src="img/logo_02.png"></div>
    <div class="logo_circles" id="logo4"><img src="img/logo_04.png"></div>
</div>

以及匹配的 CSS...

.logo_circles {
    text-align:center;
    margin-top:50px;
}

.logo_circles img {
    width:250px;
    height:auto;
    opacity:0.8;
}

/* Set height adjustments */
#logo2, #logo3, #logo4 {
    margin-top:-250px;
}

/* set horizontal position adjustments */
#logo1 {
    margin-left:-600px;
}

#logo2 {
    margin-left:-200px;
}

#logo3 {
    margin-right:-200px;
}

#logo4 {
    margin-right:-600px
}

【问题讨论】：

希望能看到您已经尝试过的 JS TweenMax 代码，以便更好地帮助我们。

标签： css gsap

【解决方案1】：

你的页面被滚动条推到最右边，因为你需要在 .logo_circles 元素上使用 position: absolute文档流中的元素..因此它不会影响您在徽标周围的标记。

.container {
     position:relative;
}

.logo_circles {
    position:absolute;
}

并使用 CSS 属性 top、right、bottom、left 代替 margin-right 和 margin-top。或者使用 translateX() 和/或 translateY 来定位元素。

【讨论】：

【解决方案2】：

原来我需要使用 css 填充属性而不是边距...

.logo_circles {
    text-align:center;
    margin-top:50px;
}

.logo_circles img {
    width:250px;
    height:auto;
    opacity:0.9;
}

/* Set height adjustments */
#logo2, #logo3, #logo4 {
    margin-top:-250px;
    /*width:250px;*/
    /*margin-right:auto;
    margin-left:auto;*/
}

/* set horizontal position adjustments */
#logo1 {
    /*margin-right:auto;*/
    /*width:250px;*/
    /*margin:0 auto;*/
    padding-right:600px;
}

#logo2 {
    padding-right:200px;
}

#logo3 {
    padding-left:200px;
}

#logo4 {
    padding-left:600px;
}

那么更新后的 Tween 调用是……

TweenMax.from($('#logo1'), 2, {css:{paddingLeft:0, paddingRight:0}, ease:Quad.easeInOut, delay:2 });
TweenMax.from($('#logo2'), 2, {css:{paddingLeft:0, paddingRight:0}, ease:Quad.easeInOut, delay:2 });
TweenMax.from($('#logo3'), 2, {css:{paddingLeft:0, paddingRight:0}, ease:Quad.easeInOut, delay:2 });
TweenMax.from($('#logo4'), 2, {css:{paddingLeft:0, paddingRight:0}, ease:Quad.easeInOut, delay:2 });

【讨论】：