1

我是 ReactJS 的新手,并且从未在 React 中使用 CSS 中的任何动画。我正在尝试使用 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 中单击时转换输入元素的宽度/高度?

4

1 回答 1

0

这个问题出现了两种不同的技术。

  1. CSS + HTML。它们可以在没有 React 的情况下工作,只是因为浏览器支持呈现 HTML。与transitionCSS 属性一样,它完全可以在没有 React 的情况下工作。所以不需要在过渡时重新渲染。浏览器将完成所需的一切。

    您有工作代码,但似乎您为<div>元素使用了不正确的类名。使用文本字符串作为className道具和代码将工作

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

    这是示例

  2. CSSTransition是完全不同的技术。它更改包装组件的类名。要制作流畅的动画,您应该使用带有-enter,-enter-active-enter-done后缀的特定类名。动画在inprop 设置为时开始true,所以这个 prop 应该保持在状态。

    这是示例

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

于 2019-12-09T11:07:38.377 回答