Javascript 使动态设置的文本淡入/淡出

我有一个字符串列表，这些字符串根据父级控制的

pos

动态显示

这很好，但是我如何才能使某种不透明度面朝外/过渡

一种方法是从一开始就用每个文本填充

内容列表

，让它们

位置：绝对

，使它们彼此重叠，然后根据

位置

，更改相应元素的不透明度-这会起作用，但是

内容列表

有一个最小高度，如果字符串较长，这个最小高度应该会增加-使用

位置：绝对

会破坏这种行为

const Content = ({pos}) => {

    const content = [
        "Hallo, Ich bin Tim",
        "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut.",
        "Vielen Dank!"
    ];

    return (
        <div className="content__list">
            <p className="content__item">{content[pos]}</p>

            {/*{*/}
            {/*    content.map((item, index) => {*/}
            {/*        return(*/}
            {/*            <p className={"content__item " + (pos === index ? "active" : "")}>*/}
            {/*                {item}*/}
            {/*            </p>*/}
            {/*        );*/}
            {/*    })*/}
            {/*}*/}

        </div>
    );
};

const Content=（{pos}）=>{
常量内容=[
“你好，我是提姆”，
“Lorem ipsum door sit amet，consetetur sadipscing elitr，sed diam nonumy eirmod tempor invidunt ut.”，
“Vielen Dank！”
];
返回(
{content[pos]}
{/*{*/}
{/*content.map（（项，索引）=>{*/}
{/*返回（*/}
{/*
*/}
{/*{item}*/}
{/*
*/}
{/*        );*/}
{/*    })*/}
{/*}*/}
);
};