Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – How to apply the rotate effect both closing and opening this select input?

I have this down arrow image, which rotates to an up arrow when the boolean "open" function switches, with a transition effect.

<img src="./downArrow.png" className={`${(open) && "rotate-180 transition-all"}`} />

But when I try to close the container, the arrow goes back to its original state without the transition effect. I tried already a few different ways to apply this effect to (!open) as well but none worked.

How can I do this?

Tags:

2

Answers


  1. 0

    In your code, the transition-all class also gets removed when open is false.

    To avoid this, move transition-all out of the condition:

    <img src="./downArrow.png" className={`${open && "rotate-180"} transition-all`} />

    This way, transition-all is always present in the class string even when open is false.

    Login or Signup to reply.
  2. 0

    I think there are two problems in your code.
    1-The image was not imported properly.
    2-There is no transition from 180-0.

    import React from "react";
import { useState } from 'react';

function MyButton(){
  const [open ,setOpen]= useState(false);
  return <button onClick={() => setOpen(!open)}>Buuton<img src={require("./downArrow.png")}
         className={`${open ? 'rotate-180 transition-all' : ' transition-all'}`}/>
  </button>
}
export default MyButton;

    or

    import React from "react";
import { useState } from 'react';
import downArrow from "./downArrow.png"
function MyButton(){
  const [open ,setOpen]= useState(false);
  return <button onClick={() => setOpen(!open)}>Buuton<img src={downArrow}
         className={`${open ? 'rotate-180 transition-all' : ' transition-all'}`}/>
  </button>
}
export default MyButton;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search