css 自定义文本淡入组件

wztqucjr 于 2023-05-30 发布在其他

关注(0)|答案(2)|浏览(137)

我正在为我的一个项目创建这个自定义文本淡入组件，遇到了一个问题。
我通过拆分字符串创建一个单词列表，然后将每个单词Map到它自己的Typography（mui v4）组件中，并将单词的索引作为动画延迟偏移量。
我注意到，在移动的的文本似乎并没有 Package ，即使整个句子太长，并有麻烦解决这个问题。
我试着用word + ' '代替word + '\u00a0'，然后在每个单词上添加style={{ whiteSpace: 'pre-wrap' }}，但由于某种原因，这并没有在移动的中放置任何空格（尽管它对非mobile有）。
任何帮助将不胜感激。

import React, { useEffect, useState } from 'react';
import { makeStyles, useTheme } from '@material-ui/core/styles';
import { Typography } from '@material-ui/core';

const useStyles = makeStyles(theme => ({
    textFadeIn: {
        opacity: 0,
        animationName: '$fadeIn',
        animationDuration: ({animationSpeed}) => (`${animationSpeed}s`),
        animationFillMode: 'forwards',
    },
    '@keyframes fadeIn': {
        '0%': { opacity: 0 },
        '100%': { opacity: 1 },
    },
}));

export default function FadeInWords({ text, className, style, delay = 0.2, animationSpeed=1 }) {
    const classes = useStyles({ animationSpeed });
    const words = text.split(' ');

    return (
        <>
            {words.map((word, index) => {
                return (
                    <Typography className={[classes.textFadeIn, className]} style={{ ...style, animationDelay: `${index * delay}s` }}>
                        {(words.length === index + 1) ? word : word + '\u00a0'}
                    </Typography>
                );
            })}
        </>
    );
}

桌面视图：

移动的视图：

预期移动的视图：

css

来源：https://stackoverflow.com/questions/76314024/custom-text-fade-in-component

2条答案

按热度按时间

mbyulnm01#

import Styled from "styled-components";

 export default function FadeInWords({ text, className, style, delay = 0.2, animationSpeed=1 }) {
    const [size, setSize] = useState(0);
    useEffect(() => {
       const width = document.body.clientWidth;
       setSize(width);
    }, []);
    const classes = useStyles({ animationSpeed });
    const words = text.split(' ');

    return (
        <Wrapper width = {size}>
            {words.map((word, index) => {
                return (
                    <Typography className={[classes.textFadeIn, className]} style={{ ...style, animationDelay: `${index * delay}s` }}>
                        {(words.length === index + 1) ? word : word + '\u00a0'}
                    </Typography>
                );
            })}
        </Wrapper>
    );
}

const Wrapper = Styled.div`
    width: ${({ width }) => width};
`;

你在试着给这个词打个问号，这是行不通的。相反，给整个句子给予宽度，这将根据屏幕大小将句子换行到下一行。
我希望这对你有帮助！！

赞(0）回复(0）举报 2023-05-30

ccgok5k52#

这是你可以这样尝试的：
只需在textFadeIn中添加display: "inline-block"

textFadeIn: {
    opacity: 0,
    display: "inline-block",
    animationName: "$fadeIn",
    animationDuration: ({ animationSpeed }) => `${animationSpeed}s`,
    animationFillMode: "forwards"
  },

我希望这对你有帮助！

赞(0）回复(0）举报 2023-05-30

我来回答

css 自定义文本淡入组件

2条答案

相关问题

热门标签

最新问答