Tailwind 转换在 React 中停止工作

Question

我使用 isVisible 来触发转换

    useEffect(() => {
        const timer = setTimeout(() => {
            setIsVisible(true);
        }, 500);

        return () => clearTimeout(timer);
    },[]);

<img src={background} alt="background" className={`
                absolute top-[20%] -left-[20%] transform z-0
                transition duration-[2s] ease-in-out opacity-${isVisible ? 50 : 0} 
              scale-[${isVisible ? "180%" : "100%"}]`}/>

一开始运行良好，但突然无法正常运行。不透明度的变化有过渡，但是并没有变成想要的值，只能从0%变化到100%，缩放和平移根本不起作用。代码有什么问题吗？

Answer 1

在您当前的设置中，变量

isVisible

被插入到字符串中，但不会作为 JavaScript 表达式进行计算。这就是为什么您发现不透明度总是变成

0%

或

100%

，并且缩放不起作用。

这是解决问题的方法：

useEffect(() => {
    const timer = setTimeout(() => {
        setIsVisible(true);
    }, 500);

    return () => clearTimeout(timer);
},[]);
<img src={background} alt="background" className={`
            absolute top-20% -left-20% transform z-0
            transition duration-2000 ease-in-out ${isVisible ? 'opacity-50' : 'opacity-0'}
            ${isVisible ? 'scale-180' : 'scale-100'}`}/>