How to use CSS Transition on click of input element ReactJS

Question

I am new to ReactJS and have never used any animations in React yet with CSS. I am trying to transition the width of an input on focus using CSS and it's not working out. Below is my JSX & CSS code

<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;
}

What happens on click is that it switches the width from 200 to 250 in 2 seconds WITHOUT transition appearing. From a little research, I found out that sometimes when elements need to rerender (Correct me if I am wrong), the transitions do not work and for this something such as CSSTransition from 'react-transition-group' library could be useful. I imported the library and my code looks like this now

<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>

But when I go to console to see what parameters change for the CssTransition element on click of an input - I see that none of them changes (such as appear, enter, exit ...)

I could not find any useful demos on how to make this work and would appreciate a lot if anyone can help me with a similar example with JSFiddle or some kind of an explanation.

My main question here is how to transition the width/height of an input element on click in ReactJS if an element needs to rerender?

I recommend that you use `ref` instead of state change to perform this kind of effect especially on inputs. — Lhew, Dec 08 '19 at 21:07
@Lhew - Can you let me know where I can find more information about that - would you have any demos to show me an example? — , Dec 08 '19 at 23:46
Hey, i've done an example for you: https://codesandbox.io/s/sleepy-napier-21w5h — Lhew, Dec 09 '19 at 08:54

score 0 · Answer 1 · answered Dec 09 '19 at 11:07

There are two different technologies appear in this question.

CSS + HTML. They work without React, just because browser supports rendering HTML. As transition is CSS prop, it will work without React at all. So it's no need to do re-rendering on transition. Browser will do everything required.

You have working code, but seems that you're using incorrect class name for <div> element. Use text string as className prop and code will work
```
<div className="SearchboxInput">
  <input
    type="text"
    className="rq-form-element pickup-location"
    placeholder="Pickup Location"
  />
</div>
```
Here is example.
CSSTransition is completely different technology. It changes class names of wrapped component. To make smooth animation you should have specific class names with -enter, -enter-active and -enter-done suffixes. Animation is started when in prop is set to true, so this prop should be held in state.

Here is example

For you task I suggest to use first method with pure CSS.

How to use CSS Transition on click of input element ReactJS

1 Answers1