时间戳

首页 > 解决方案 > 如何在单击输入元素 ReactJS 时使用 CSS 转换

css - 如何在单击输入元素 ReactJS 时使用 CSS 转换

问题描述

我是 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 中单击时转换输入元素的宽度/高度？

标签： cssreactjscss-transitionsreact-transition-groupreact-animations

解决方案

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

  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 的第一种方法。

推荐阅读