Fade in Text Animation 根本不出现

Question

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

我怀疑我没有正确声明我的样式？

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

我将您的关键帧定义如下，并将它们从样式对象中删除（因为它们从未被使用过）。

const fadeIn = `
    @-webkit-keyframes fade-in { 
        0% { 
            opacity: 0;
            filter: blur(4px);
        } 

        100% { 
            opacity: 1; 
            filter: blur(0); 
        } 
    } 
    `;
const scale = `
    @-webkit-keyframes scale {
         0% {
            transform: scale(0) 
        } 100% {
            transform: scale(1) 
        } 
    } `;

现在，您可以通过在TextAnimation组件的返回上方简单地添加以下内容来解决文档中没有关键帧的问题：

const style = document.createElement("style");
style.innerHTML = `${fadeIn} ${scale}`;
document.getElementsByTagName("head")[0].appendChild(style);

最后，您需要删除有关跨度的默认样式（ opacity和filter ）（因为我们将它们移动到关键帧本身）。 styles中的跨度现在看起来像这样：

span: {
    display: "inline-block",
},

现在在渲染TextAnimation时，它应该可以工作了。 完整代码：

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)",
    },

    span: {
        display: "inline-block",
    },

    "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)",
    },
};

const fadeIn = `
    @-webkit-keyframes fade-in { 
        0% { 
            opacity: 0;
            filter: blur(4px); 
        } 

        100% { 
            opacity: 1; 
            filter: blur(0); 
        } 
    } 
    `;
const scale = `
    @-webkit-keyframes scale {
         0% {
            transform: scale(0) 
        } 100% {
            transform: scale(1) 
        } 
    } `;

function TextAnimation() {
    const style = document.createElement("style");
    style.innerHTML = `${fadeIn} ${scale}`;
    document.getElementsByTagName("head")[0].appendChild(style);

    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>
        </>
    );
}

Answer 2

我使用styled-components复制了codepen示例，并使其更加自定义，当句子长度发生变化时，您无需每次都添加或删除额外的伪类。 而且这种方法无需任何innerHTML注入。

文本动画.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} />
    </>
  );
}