Vous pouvez essayer d'utiliser styled-components 来使您的组件更灵活和兼容。我使用 styled-components qui reproduit l'exemple codepen et facilite son extension.

Par conséquent, TopAnimateBlock et BottomAnimateBlock ont tous deux l'attribut TopAnimateBlock 和 BottomAnimateBlock 都有 numOfLine 属性，表示块内有多少行。在 BottomAnimateBlock 中的第二个属性是 delayTopLine，它应该与 TopAnimateBlocknumOfLine, qui indique le nombre de lignes à l'intérieur du bloc. La deuxième propriété de BottomAnimateBlock est delayTopLine

numOfLineTextStyle dans TopAnimateBlock car nous devons attendre que la rangée du haut soit jouée. De plus, vous pouvez facilement changer la couleur du texte via l'attribut color de et transmettre la valeur de couleur, HEX color ou rgba()

hsla()

TexteAnimation.tsx

import styled, { keyframes } from 'styled-components';

const showTopText = keyframes`
  0% { transform: translate3d(0, 100% , 0); }
  40%, 60% { transform: translate3d(0, 50%, 0); }
  100% { transform: translate3d(0, 0, 0); }
`;
const showBottomText = keyframes`
  0% { transform: translate3d(0, -100%, 0); }
  100% { transform: translate3d(0, 0, 0); }
`;

const Section = styled.section`
  width: calc(100% + 10vmin);
  display: flex;
  flex-flow: column;
  padding: 2vmin 0;
  overflow: hidden;
  &:last-child {
    border-top: 1vmin solid white;
  }
`;

const Block = styled.div<{ numOfLine: number }>`
  position: relative;
`;
const TopAnimateBlock = styled(Block)`
  animation: ${showTopText} calc(0.5s * ${props => props.numOfLine}) forwards;
  animation-delay: 0.5s;
  transform: translateY(calc(100% * ${props => props.numOfLine}));
`;
const BottomAnimateBlock = styled(Block)<{ delayTopLine: number }>`
  animation: ${showBottomText} calc(0.5s * ${props => props.numOfLine}) forwards;
  animation-delay: calc(0.7s * ${props => props.delayTopLine});
  transform: translateY(calc(-100% * ${props => props.numOfLine}));
`;

const TextStyle = styled.p<{ color: string }>`
  font-family: Roboto, Arial, sans-serif;
  font-size: 12vmin;
  color: ${props => props.color};
`;

export const TextAnimation = () => {
  return (
    <>
      <Section>
        <TopAnimateBlock numOfLine={2}>
          <TextStyle color="grey">mimicking</TextStyle>
          <TextStyle color="white">apple's design</TextStyle>
        </TopAnimateBlock>
      </Section>
      <Section>
        <BottomAnimateBlock numOfLine={1} delayTopLine={2}>
          <TextStyle color="white">for the win!</TextStyle>
        </BottomAnimateBlock>
      </Section>
    </>
  );
};

1. Si nous voulons animer 3 lignes au lieu de 2, il suffit d'ajouter/modifier : TextStyle
2. Ajouter un nouveau TopAnimateBlock 中将 numOfLine 从2更改为3，在 BottomAnimateBlockcomposant Changement de
numOfLine
3. de 2 à 3 dans TopAnimateBlock et
delayTopLine

const showTopText = keyframes`
  0% { transform: translate3d(0, 100% , 0); }
  25%, 40% { transform: translate3d(0, 66%, 0); }
  60%, 75% { transform: translate3d(0, 33%, 0); }
  100% { transform: translate3d(0, 0, 0); }
`;