如何在单击输入元素ReactJS时使用CSS过渡

Question

我是ReactJS的新手，并且从未在CSS中使用过React中的任何动画。我正在尝试使用CSS转换焦点输入的宽度，但无法解决。以下是我的JSX和CSS代码

<div className={classes.SearchboxInput}>
   <input type="text" className="rq-form-element pickup-location" placeholder="Pickup Location" />
</div>
-------
.SearchboxInput input{
   background: transparent;
   border: 0;
   border-bottom: 1px solid #999999;
   padding: 6px;
   width: 200px;
   margin-left: 11px;
   -webkit-transition: width 2s;
   transition: width 2s;
}
.SearchboxInput input[type=text]:focus {
   width:250px;
}

点击发生的是，它在2秒内将宽度从200切换到250，而没有出现过渡。通过一些研究，我发现有时需要重新渲染元素（如果我错了，请纠正我），过渡不起作用，为此，例如来自“ react-transition-group”库的CSSTransition可能会有用。我导入了库，代码现在看起来像这样

<div className={classes.SearchboxInput}>
     <CSSTransition
        classNames = "pickup-location"
        in = {true}
        timeout = {200}>
                <input type="text" className="rq-form-element pickup-location" placeholder="Pickup Location" />
     </CSSTransition>
</div>

但是当我进入控制台以查看单击输入时CssTransition元素的参数有什么变化时-我发现它们都没有变化（例如出现，进入，退出...）

我找不到有关如何进行此工作的有用演示，如果有人可以通过JSFiddle提供类似示例或某种解释来帮助我，我将不胜感激。

我的主要问题是，如果元素需要重新渲染，如何在ReactJS中单击时转换输入元素的宽度/高度？

Answer 1

此问题中出现了两种不同的技术。

1. CSS + HTML。它们无需React就可以工作，只是因为浏览器支持呈现HTML。由于transition是CSS道具，因此完全不需要React。因此，无需在过渡时进行重新渲染。浏览器会做所需的一切。

   您有可用的代码，但似乎您为<div>元素使用了错误的类名。使用文本字符串作为className属性，代码将起作用

   <div className="SearchboxInput">
     <input
       type="text"
       className="rq-form-element pickup-location"
       placeholder="Pickup Location"
     />
   </div>
   

   这里是example。

2. CSSTransition是完全不同的技术。它更改包装组件的类名。为了使动画流畅，您应该使用带有-enter，-enter-active和-enter-done后缀的特定类名称。当in道具设置为true时开始动画，因此该道具应保持状态。

   这里是example

对于您的任务，我建议对纯CSS使用第一种方法。