Estoy tratando de implementar esta animación de onda de texto - https://codepen.io/alvarotrigo/pen/xxLvyOG - en mi código. Quiero dejar que se mueva una palabra en mi texto en React Typescript con estilo en línea, pero no puedo hacer que funcione. Creo que declaré que el lapso de waiviy y los fotogramas clave eran incorrectos en mis estilos o no los usé correctamente en línea. Sé que falta el estilo = "--i: 3" en el ejemplo de intervalos porque arroja errores para mí y no estoy seguro de cómo aplicarlo en línea. ¿Alguien puede ayudar y decir dónde está mi error, por favor?
import React from 'react'; import Typography from '@mui/material/Typography'; const styles = { waviy: { position: 'relative', -webkitBoxReflect: "below -20px linear-gradient(transparent, rgba(0,0,0,.2))", fontSize: '60px', }, 'waviy span': { fontFamily: 'Alfa Slab One, cursive', position: 'relative', display: 'inline-block', textTransform: 'uppercase', animation: 'waviy 1s infinite', animationDelay: 'calc(.1s * var(--i))', }, '@keyframes waviy': { '0%,40%,100%': { transform: 'translateY(0)', }, '20%': { transform: 'translateY(-20px)', }, }, }; function App() { return ( <Typography variant={'h3'} fontWeight={'bold'}> All Your <Typography sx={styles.waiviy}> <span style={{ color: '#fbbf2c' }}>p</span> <span style={{ color: '#fbbf2c' }}>l</span> <span style={{ color: '#fbbf2c' }}>a</span> <span style={{ color: '#fbbf2c' }}>n</span> <span style={{ color: '#fbbf2c' }}>t</span> <span style={{ color: '#fbbf2c' }}>s</span> </Typography> in One Place </Typography> ); } export default App;He adjuntado un enlace a los códigos y caja espero que te ayude
CAJA DE CÓDIGOS ACTUALIZADOS : https://codesandbox.io/s/lucid-mclaren-qytt3q?file=/src/App.tsx:0-1271
CÓDIGO ACTUALIZADO (usando .ts) : Extendí la interfaz React.CSSProperties para crear mi interfaz personalizada y luego la usé en los estilos prop. Esto no arroja ningún error de tslint;)
import React from "react"; import { styled } from "@mui/material/styles"; import { Typography } from "@mui/material"; const AnimatedTypography = styled(Typography)` & { position: relative; -webkit-box-reflect: below -20px linear-gradient(transparent, rgba(0, 0, 0, 0.2)); font-size: 60px; } & span { color: #fbbf2c; font-family: "Alfa Slab One", sans-serif; position: relative; display: inline-block; text-transform: uppercase; animation: waviy 1s infinite; animation-delay: calc(0.1s * var(--i)); } @keyframes waviy { 0%, 40%, 100% { transform: translateY(0); } 20% { transform: translateY(-20px); } } `; interface Styles extends React.CSSProperties { "--i": number; } function App() { const string = "plants"; return ( <Typography variant={"h3"} fontWeight={"bold"}> All Your <AnimatedTypography> {string.split("").map((char, idx) => { const styles: Styles = { "--i": idx + 1 }; return ( <span key={`${char}-${idx}`} style={styles}> {char} </span> ); })} </AnimatedTypography> in One Place </Typography> ); } export default App;Creo que reaccionar no debería hacer que su código sea complejo, puede hacerlo de una manera muy simple como vanilla js.
No pienses demasiado complicado. Hagámoslo fácil.
Primero, copie todo el CSS de Codepen a app.css.
import React from 'react'; import './App.css'; function App() { const str = 'text animation' return ( <main> <div className="waviy"> { str.split('').map(function (letter, index) { // important line // jsx style syntax return <span style={{ '--i': index }} key={letter + index.toString()}>{letter}</span> }) } </div> </main> ); } export default App;Todo hecho, no más código.
Su problema debería ser cómo agregar variables CSS en JSX, eso es muy fácil. style={{key: value}}
¡Pruébelo usted mismo! Espero que te ayude.