(React / CSS)的宽度<ul>不适合<li><li>动画更新宽度时的宽度

Question

我目前正在React中实现一个打字动画。li具有递归地将其宽度从0px改变为100%的动画。然而，当li的宽度发生变化时，ul确实与li的宽度相匹配，从而在文本区域中留下空白。我想要包装纸和li动画一起收缩。

也许问题的根本原因是我使用ref.current.contentText直接突变了li儿童，但我不确定。

我已经创建了可视化演示，空白区域用蓝色突出显示：

演示：https://codesandbox.io/s/nostalgic-breeze-hq7d6e?file=/src/styles.css

有人知道我的代码出了什么问题，以及如何修复它吗？谢谢

Answer 1

为了避免这个问题，我已经将方法从css改为javascript。但是，如果你知道css问题发生了什么，请随时留下评论。感谢

const Test = () => {
const textOptions = ['Military Personnel', 'Software Developer', 'Construction Worker', 'Medical Professional'];
const dynamicRef = useRef(null);
useEffect(() => {
function changeText() {
let optionIndex = 0;
let charIndex = 0;
let increment = true;
setInterval(() => {
if (dynamicRef.current) {
dynamicRef.current.textContent = textOptions[optionIndex].slice(0, charIndex);
if (charIndex === textOptions[optionIndex].length) {
setTimeout(() => {
increment = false;
}, 500);
} else if (charIndex <= 0) {
optionIndex++;
increment = true;
}
if (increment) {
charIndex++;
} else {
charIndex--;
}
if (optionIndex > textOptions.length - 1) {
optionIndex = 0;
}
}
}, 100)
}
changeText();
}, [])
return (
<div className='test'>
<div className='wrapper'>
<p>I am</p>
<p ref={dynamicRef}></p>
</div>
</div>
)
}