setTimeout在useEffect中

Question

我正在尝试在setTimeout和useEffect中更改元素的样式。

这是代码的样子

In home.js: 
useEffect(()=>{
    setTimeout(()=>{
        // change styles  for 'frontenddevelopment'
        changeStyles1();
    },1000)

    // changeStyles for 'i love frontend'
    changeStyles2()
},[])

我发现渲染主页后，如果我导航到其他页面并返回到主页，将再次调用changesStyles1（）并再次运行动画。从其他页面导航回到主页时，应该怎么做以避免再次调用setTimeout（）。

您会发现，如果我从首页导航到其他页面然后返回首页，则changeStyle2不会再显示动画。这就是我想要的效果。

我的网站托管在netlify上 我在codepen

上的代码