GSAP 中断时间表答案

【问题标题】：GSAP broken timelinesGSAP 中断时间表
【发布时间】：2017-06-12 09:01:08
【问题描述】：

我在我的代码中犯了一些基本错误，请查看我的 codepen。您将在结果标题/副标题中看到比空洞和最后两个关闭链接。但我想看到一些我称之为 .js-main-boxies 的表单/营销内容和带有 .js-cta-form1 和 .js-cta-form2 类的隐藏 div。我的时间线默认是暂停的，所以问题是为什么我看到的是损坏的版本而不是正确的版本？笔没有CSS，所以问题不能出在那个。当您删除时间线 tlMeetingFormClose 和 tlOnlineFormClose 时，它可以工作，但当然关闭功能不会。

有趣的是，当您单击“form 1 close”时，比单击“click 1”时，您会看到单击“form 1 close”的可能性，但它不起作用。任何帮助或建议表示赞赏 thx

mycodepen 有问题的时间表

tlMeetingFormClose and tlOnlineFormClose

【问题讨论】：

标签： javascript gsap

【解决方案1】：

这是您的代码的一个小问题。当您在时间线中使用 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。你只需要使用 To 然后给出你想要的最终位置，因为这个时间线只有在 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 });

我希望最终结果是您所期望的。如果没有，请告诉我。

【讨论】：

谢谢回答，抱歉我没有早点注意到。是的，它有帮助