javascript - Fade in Text Animation 根本不出现

Question

我想创建一个在用户向下滚动到所需部分时淡入的文本动画。我正在尝试重新创建这个示例 - https://codepen.io/alvarotrigo/pen/ExvqdNa - 在带有内联样式的 React 中，我不知道为什么它不起作用。谁能帮忙说出我的错误在哪里？
我怀疑我没有正确声明我的样式？

import React from 'react';

const styles = {
    body: {
        padding: '0px',
        margin: '0px',
        height: '100vh',
        display: 'flex',
        flexDirection: 'column',
        justifyContent: 'center',
        alignItems: 'center',
    },

    h1: {
        fontFamily: 'Montserrat Medium',
        maxWdth: '40ch',
        textAlign: 'center',
        transform: 'scale(0.94)',
        animation: 'scale 3s forwards cubic-bezier(0.5, 1, 0.89, 1)',
    },
    '@keyframes scale': {
        '100%': {
            transform: 'scale(1)',
        },
    },

    span: {
        display: 'inline-block',
        opacity: 0,
        filter: 'blur(4px)',
    },

    'span:nth-child(1)': {
        animation: 'fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0)',
    },

    'span:nth-child(2)': {
        animation: 'fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0)',
    },

    'span:nth-child(3)': {
        animation: 'fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0)',
    },

    'span:nth-child(4)': {
        animation: 'fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0)',
    },

    'span:nth-child(5)': {
        animation: 'fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0)',
    },

    'span:nth-child(6)': {
        animation: 'fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0)',
    },

    'span:nth-child(7)': {
        animation: 'fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0)',
    },

    'span:nth-child(8)': {
        animation: 'fade-in 0.8s 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0)',
    },

    'span:nth-child(9)': {
        animation: 'fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0)',
    },

    'span:nth-child(10)': {
        animation: 'fade-in 0.8s 1s forwards cubic-bezier(0.11, 0, 0.5, 0)',
    },

    'span:nth-child(11)': {
        animation: 'fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0)',
    },

    'span:nth-child(12)': {
        animation: 'fade-in 0.8s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0)',
    },

    'span:nth-child(13)': {
        animation: 'fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0)',
    },

    'span:nth-child(14)': {
        animation: 'fade-in 0.8s 1.4s forwards cubic-bezier(0.11, 0, 0.5, 0)',
    },

    'span:nth-child(15)': {
        animation: 'fade-in 0.8s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0)',
    },

    'span:nth-child(16)': {
        animation: 'fade-in 0.8s 1.6s forwards cubic-bezier(0.11, 0, 0.5, 0)',
    },

    'span:nth-child(17)': {
        animation: 'fade-in 0.8s 1.7s forwards cubic-bezier(0.11, 0, 0.5, 0)',
    },
    'span:nth-child(18)': {
        animation: 'fade-in 0.8s 1.8s forwards cubic-bezier(0.11, 0, 0.5, 0)',
    },

    '@keyframes fade-in': {
        '100%': {
            opacity: 1,
            filter: 'blur(0)',
        },
    },
};

function TextAnimation() {
    return (
        <>
            <h1 style={styles.h1}>
                <span style={styles.span}>
                    <span style={styles['span:nth-child(1)']}>There</span>
                    <span style={styles['span:nth-child(2)']}>are</span>
                    <span style={styles['span:nth-child(3)']}>no</span>
                    <span style={styles['span:nth-child(4)']}>limits</span>
                    <span style={styles['span:nth-child(5)']}>to</span>
                    <span style={styles['span:nth-child(6)']}>what</span>
                    <span style={styles['span:nth-child(7)']}>you</span>
                    <span style={styles['span:nth-child(8)']}>can</span>
                    <span style={styles['span:nth-child(9)']}>accomplish,</span>
                    <span style={styles['span:nth-child(10)']}>except</span>
                    <span style={styles['span:nth-child(11)']}>the</span>
                    <span style={styles['span:nth-child(12)']}>limits</span>
                    <span style={styles['span:nth-child(13)']}>you</span>
                    <span style={styles['span:nth-child(14)']}>place</span>
                    <span style={styles['span:nth-child(15)']}>on</span>
                    <span style={styles['span:nth-child(16)']}>your</span>
                    <span style={styles['span:nth-child(17)']}>own</span>
                    <span style={styles['span:nth-child(18)']}>thinking.</span>
                </span>
            </h1>
        </>
    );
}

export { TextAnimation };

Answer 1

我转载了密码笔 以 styled-components 为例并使其更加自定义，当句子长度发生变化时，您无需每次都添加或删除额外的伪类。而且这种方法没有任何内部HTML 注入(inject)。
文本动画.tsx

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

const fadeIn = keyframes`
100% {
    opacity: 1;
    filter: blur(0);
  }
`;

const H1Style = styled.h1`
  max-width: 500px;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
`;

const ChunksStyle = styled.span<{ order: number }>`
  display: inline-block;
  color: aliceblue;
  opacity: 0;
  filter: blur(4px);
  animation: ${fadeIn} 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
  animation-delay: ${props => `${props.order}s`};
`;

const TextAnimation = ({ text }: { text: string }) => {
  const words = text.split(' ');

  const chunks = words.map((word, index) => {
    // index + 1 - our index start from 1
    // 10 - number of decimal seconds in one second
    const count = (index + 1) / 10;

    return (
      <ChunksStyle key={index} order={count}>
        {word}
      </ChunksStyle>
    );
  });

  return <H1Style>{chunks}</H1Style>;
};

应用程序.tsx

import "./styles.css";
import { TextAnimation } from './TextAnimation';

export default function App() {
  const text =
    'There are no limits to what you can accomplish, except the limits you place on your own thinking.';
  return (
    <>
      <TextAnimation text={text} />
    </>
  );
}