Question

我是react-apps中的新功能，并且我创建了一个仅具有输入和按钮的简单表单，我向按钮添加了样式，但过渡持续时间不起作用，如何在react中解决此问题？没有反应会起作用，但在反应中我有这个问题。这是我的按钮样式

.form{
    width: 700px;
}
.btn-detect{
        background-color: #000;
        color: #fff;
        border: none;
        font-family: 'Felix Titling';
        letter-spacing: 2px;
        left: 0;
        -webkit-transition: transform 1s ease-in-out;
        -moz-transition: transform 1s ease-in-out;
        -o-transition: transform 1s ease-in-out;
        -ms-transition: transform 1s ease-in-out;
        transition: transform 1s ease-in-out;

    }
    .btn-detect:hover{
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -o-transform: scale(1.5);
        -ms-transform: scale(1.5);
        transform: scale(1.5);
    }

这是react-component：

const ImageLinkForm = () => {
    return(
        <div>
            <p className='f3 pt'>
                {'This Magic Brain will detect faces in your pictures,Give it a try!'}
            </p>
            <div className='center'>
                <div className='form center pa4 br3 shadow-5'>
                <input className='f4 pa2 w-70 center' type='text' />
                <button className='btn-detect w-30 f5 link pointer'>Detect</button>
                </div>
            </div>
        </div>
        );
}

Answer 1

代码很好，可能是您在错误的组件/文件中设置了样式，并且由于样式封装，它不会起作用或css类名拼写错误。

如果您需要更多帮助，请提供react组件代码。

Answer 2

我制作了sandbox来测试您的代码，动画正在运行。我不确定，但是您可以尝试将代码中的单引号（'）更改为双引号（"）吗？ JSX属性应使用双引号。

更新：您可以显示文件夹和文件结构，以及如何导入css文件吗？

过渡持续时间在React-Apps中不起作用吗？

2 个答案: