GSAP破時間表

我做我的代碼中一些基本的錯誤，請看看我的codepen。您會在結果標題/副標題中看到空洞，並在結尾處顯示兩個關閉鏈接。但我希望看到一些表單/營銷的東西，我稱之爲.js-main-boxies和隱藏的div類.js-cta-form1和.js-cta-form2。我的時間軸默認是暫停的，所以問題是爲什麼我看到破損的版本和不正確的版本？筆沒有CSS，所以問題不能在這。當你刪除時間線tlMeetingFormClose和tlOnlineFormClose時，它會起作用，但是當然不關閉函數。GSAP破時間表

有趣的是，當你點擊「表格1親密」，不是點擊「點擊1」，你會看到點擊爲「形式1親密」的posibility，但它不工作。任何幫助或建議讚賞THX

mycodepen 問題的時間表

tlMeetingFormClose and tlOnlineFormClose

來源

2017-06-12 Jakub Closed

這是一個小問題，與您的代碼。當您在時間軸上使用fromTo時，from值會賦予您的元素。所以當你說：

tlMeetingFormClose 
     .fromTo(ctaForm1, 0.8, { autoAlpha: 1, xPercent: '0' }, { autoAlpha: 0, xPercent: '-50', display: 'none', ease: Power2.easeOut }) 
     .set(mainBoxies, {display: 'block'}) 
     .fromTo(mainBoxies, 0.8, { autoAlpha: 0, xPercent: '-50' }, { autoAlpha: 1, xPercent: '0', ease: Power2.easeOut }); 

    tlOnlineFormClose 
     .fromTo(ctaForm2, 0.8, { autoAlpha: 1, xPercent: '0' }, { autoAlpha: 0, xPercent: '-50', display: 'none', ease: Power2.easeOut }) 
     .set(mainBoxies, {display: 'block'}) 
     .fromTo(mainBoxies, 0.8, { autoAlpha: 0, xPercent: '-50' }, { autoAlpha: 1, xPercent: '0', ease: Power2.easeOut });

然後greensock將autoAlpha 0和xpercent -50應用到mainBoxies。你只需要使用到，然後給你想要然後在最後的位置，因爲當mainBoxes已經關閉這個時間表將只運行。

當你寫下面的，一切都將正常工作。

tlMeetingFormClose 
     .fromTo(ctaForm1, 0.8, { autoAlpha: 1, xPercent: '0' }, { autoAlpha: 0, xPercent: '-50', display: 'none', ease: Power2.easeOut }) 
     .set(mainBoxies, {display: 'block'}) 
     .to(mainBoxies, 0.8, { autoAlpha: 1, xPercent: '0', ease: Power2.easeOut }); 

    tlOnlineFormClose 
     .fromTo(ctaForm2, 0.8, { autoAlpha: 1, xPercent: '0' }, { autoAlpha: 0, xPercent: '-50', display: 'none', ease: Power2.easeOut }) 
     .set(mainBoxies, {display: 'block'}) 
     .to(mainBoxies, 0.8, { autoAlpha: 1, xPercent: '0', ease: Power2.easeOut });

我希望最終結果是您的預期。如果沒有，那麼請讓我知道。

來源

2017-06-17 08:17:03 viCky

THX的答案，對不起，我沒有注意到它越快。是的，它有幫助 –

GSAP破時間表

回答

相關問題