Блог

Я создаю целевую страницу и хочу, чтобы при загрузке страницы исчезали два предложения. Я делал это раньше, но по какой-то странной причине любая новая анимация, которую я добавляю, является просто копией первой, которую я сделал. Каждое предложение, которое я добавляю, чтобы исчезнуть, — это одно и то же предложение. Это независимо от того, как я изменяю код.

Я не уверен, есть ли проблема с реквизитом или мне нужно обновить его до нового npm.

Ниже приведен код.

App.js

 import './App.css'; import styles from'./Components/styles.module.css';  import React from 'react'; import { BrowserRouter as Router, Route, Switch } from 'react-router-dom';  import Nav from './Components/Nav'; import Footer from './Components/Footer'; import Stories from './Pages/Stories'; import Contact from './Pages/Contact'; import TitleFade from './Components/TitleFade'; import BottomFade from './Components/TitleFade'; import FlipImage from './Components/FlipImage';  function App() {  return (  lt;Routergt;  lt;div className="container"gt;  lt;div className="navigation"gt;  lt;Nav /gt;  lt;/divgt;  lt;Switchgt;  lt;Route path="/" exact component={Home} /gt;  lt;Route path="/stories" exact component={Stories} /gt;  lt;Route path="/contact" exact component={Contact} /gt;  lt;/Switchgt;  lt;div className="bottom"gt;  lt;Footer /gt;  lt;/divgt;  lt;/divgt;  lt;/Routergt;  ); }  const Home = () =gt; (  lt;div className="subcontainer"gt;  lt;div className="box-2"gt;lt;/divgt;  lt;div className="box-3"gt;  lt;TitleFade /gt;  lt;/divgt;  lt;div className="box-4"gt;lt;/divgt;  lt;div className="box-5"gt;  lt;FlipImage /gt;  lt;/divgt;  lt;div className="box-6"gt;  lt;BottomFade /gt;  lt;/divgt;  lt;/divgt; );   export default App;  

BottomFade.js

 import React, { useState } from "react"; import { render } from "react-dom"; import { useTrail, animated as a } from "react-spring"; import "./styles.css";  import tfstyles from './tfstyles.module.css';  const items = ["UseTrail", "is", "Super", "Cool"]; const config = { mass: 5, tension: 2000, friction: 200 };  export default function BottomFade() {  const [toggle, set] = useState(true);  const trail = useTrail(items.length, {  config,  opacity: toggle ? 1 : 0,  x: toggle ? 0 : 20,  height: toggle ? 80 : 0,  from: { opacity: 0, x: 20, height: 0 }  });   return (  lt;div className={`${tfstyles.trailsmain}`} onClick={() =gt; set(state =gt; !state)}gt;  lt;divgt;  {trail.map(({ x, height, ...rest }, index) =gt; (  lt;a.div  key={items[index]}  className={`${tfstyles.trailstext}`}  style={{  ...rest,  transform: x.interpolate(x =gt; `translate3d(0,${x}px,0)`)  }}  gt;  lt;a.div style={{ height }}gt;{items[index]}lt;/a.divgt;  lt;/a.divgt;  ))}  lt;/divgt;  lt;/divgt;  ); }  

TitleFade.js (Any new animation I add is a copy of this).

 import React, { useState } from 'react'; import { useSpring, animated, config } from '@react-spring/web';  import tfstyles from './tfstyles.module.css';  export default function TitleFade() {  const [flip] = useState(false)  const props = useSpring({  to: { opacity: 1 },  from: { opacity: 0 },  reset: false,  reverse: flip,  delay: 500,  config: { duration: 3000 },  /*onRest: () =gt; set(!flip),*/  })   return (  lt;animated.div style={props}gt;  lt;h1 className={`${tfstyles.h1}`} gt;Hi, I'm Jonahlt;/h1gt;  lt;/animated.divgt;  ); }