在动画从侧面引入标题之前，我有一些标题。我该如何摆脱它？

Question

我正在建立一个网站来放置我所有的项目并恢复，我正在使用一些动画从加载的一侧引入标题元素，如下面的代码片段所示。但是当页面最初加载时，标题文本闪烁得非常快，然后 JavaScript 加载并将它们从侧面引入。这是预加载问题吗？它似乎没有解决它。这与元素/JavaScript 的加载顺序有关吗？或者我是否在我的 JavaScript 中遗漏了一些阻止这种情况的行？window.addEventListener('DOMContentLoaded', function () {    /* Function to bring in navbar from top staggered */    gsap.from(".btn",{duration:2,opacity:0,y:-300,stagger:0.25,});    /* Function to bring h1 in from the left */    gsap.from("h1",{duration:2.5,ease:"power2.out",x:-2000});    /* Function to bring in h2 from right */    gsap.from("h2",{duration:2.5,ease:"power2.out",x:2000});    /* Function to register gsap scroll plugin */    gsap.registerPlugin(ScrollToPlugin);    /* Function to scroll to About me when button is clicked */    document.getElementById('scroll').addEventListener('click', function clicked() {    gsap.to(window, {duration: 0.8, scrollTo:'#red' });    });});

Answer 1

从文档：

DOMContentLoaded 事件在初始 HTML 文档已完全加载和解析时触发，无需等待样式表、图像和子框架完成加载。

这意味着您的网页将在执行回调之前呈现。

Answer 2

尝试将您移动<script src="main.js"></script>到 html 正文的最底部，以便其他所有内容首先运行。我刚刚向项目中添加了一些动画……我是这样做的：

window.onload(animations());

function animations(){

    const tl = gsap.timeline({defaults: {ease: "power1.out"}});

    tl.to(".intro", {y: "-100%", duration: 1, delay: 1});

    tl.fromTo(".intro", {opacity: 1}, {opacity: 0, duration: 1}, "-=1");

    tl.fromTo(".card", {y: "100%"}, {y: "0%", duration: 1, stagger: 0.25}, "-=1");

    tl.fromTo("#logo-blk", {y: "-400%", rotation: "-30"}, {y: "-100%", rotation: "0", 

        duration: 0.5}, "-=0.5");

}