Может ли кто-нибудь помочь мне добиться плавного перехода для SVG при событии onClick в response.js? ⇐ CSS

[Anonymous]

Я хочу иметь значок гамбургера, и при событии onClick он меняется на значок «X».
Но мне не удается добиться плавного перехода. Может ли кто-нибудь мне помочь?
Реагировать

Код: Выделить всё

import React, {useState} from 'react';
import '../Styles/BurgerIcon.css';

const BurgerIcon = () => {
const [isMenuOpen, setIsMenuOpen] = useState(false);
const toggleMenu = () => {
setIsMenuOpen(!isMenuOpen);
};
return (

className='burger_icon_path'
stroke-linecap="round"
stroke-linejoin="round"
d={!isMenuOpen? "M3.75 6.75h16.5M3.75 12h16.5M12 17.25h8.25":"M6 18 18 6M6 6l12 12"}
/>

)
};

export default BurgerIcon;

CSS

Код: Выделить всё

.burger_icon{
transition: all 500ms ease;
}

.burger_icon_path{
transition: d 500ms ease;
}

Спасибо.

Подробнее здесь: https://stackoverflow.com/questions/784 ... in-react-j