當使用GSAPs交錯方法時，無法保持元素不重疊

所以我想用TweenMax.staggerTo錯開一些字母。當使用GSAPs交錯方法時，無法保持元素不重疊

這裏是JS：

TweenMax.staggerTo(letter, 2, {bottom:0, opacity: 1, delay: 2}, 1);

的HTML：

<div class="middle"> 
    <p class="letter">p</p> 
    <p class="letter">p</p> 
    <p class="letter">p</p> 
    <p class="letter">p</p> 
</div>

而CSS：

.letter { 
    display: inline; 
    margin-right: 100px; 
    opacity: 0; 
    position: absolute; 
} 

.middle { 
    text-align: center; 
    padding-top: 100px; 
    height: 100vh; 
    margin: auto; 
}

一個官方教程我看到的解釋，在該位置被動畫的元素需要具有絕對位置屬性或固定位置屬性。

我很困惑，雖然，我怎麼能動畫這些對象，而把它們都相互重疊。這是我要去的一個例子：GSAP Staggered Animated Elements

謝謝！

來源

2016-06-11 Julianna Green

可能爲您創建一個小提琴演示？ –

-1

下面是我講的

<div class="middle"> 
<p class="letter">h</p> 
<p class="letter">e</p> 
<p class="letter">l</p> 
<p class="letter">p</p> 
</div> 

.letter { 
    display: inline; 
    margin-right: 100px; 
    opacity: 0; 
    position: absolute; 
    font-size: 40px; 
} 

.middle { 
text-align: center; 
height: 100vh; 
margin: auto; 
position: relative; 
} 

var letter = document.getElementsByClassName("letter"); 
TweenMax.staggerTo(letter, 2, {bottom:0, opacity: 1}, 1);

來源

2016-06-11 20:35:05

只需刪除該位置：絕對？ http://codepen.io/anon/pen/yJoJkK – vtosh

你的codepen鏈接應該放在你的上面的問題..不張貼爲答案！ –

我剛剛得到了同樣的問題，請考慮我是一個初學者也怎樣，staggerTo方法是不適合這個例子中codepen。

讓我們看看staggerTo方法的正式定義中使用GreenSock：

Tweens an array of targets to a common set of destination values, but 
staggers their start times by a specified amount of time, creating an  
evenly-spaced sequence with a surprisingly small amount of code.

所以，如果我的理解，要記住，最重要的是，它的補間對象的數組到共同目標值集合。所以這就是爲什麼你的信件與彼此重疊，具有相同的目標值，這是基本上如何使用staggerTo方法。

爲了解決這個問題，我試圖做的是，因爲我的所有元素都在一個數組中，所以我在javascript中使用了forEach（）方法，並在每個循環中增加索引。

下面是修改了codepen，請隨時再次問，如果你沒有已瞭解：CodePen Solution

基本上我只是做就像是做一個簡單的時間表，並添加到方法對每個字母。

希望它有幫助！

快樂補間

來源

2016-07-24 01:45:09 MaieonBrix

當使用GSAPs交錯方法時，無法保持元素不重疊

回答

相關問題