https://codesandbox.io/s/lxlwrv9y57
React
import { render } from 'react-dom'
import React, { useState } from 'react'
import './styles.css'
function App(props) {
const [open, toggle] = useState(false)
return (
<div className="wrapper">
<button onClick={() => toggle(!open)} className="button">
Click
</button>
<div className={`list ${open ? 'active' : 'inactive'}`}>
<div className="item">Item 1</div>
<div className="item">Item 2</div>
<div className="item">Item 3</div>
</div>
</div>
)
}
render(<App />, document.getElementById('root'))
Css
* {
box-sizing: border-box;
}
.wrapper {
display: flex;
flex-direction: row;
}
.list {
display: flex;
flex-direction: row;
margin-left: 20px;
}
.item {
display: flex;
justify-content: center;
background-color: #969696;
border: 2px solid #000;
padding: 15px;
cursor: pointer;
}
.active {
width: auto;
overflow: visible;
transition: width 1s linear 0.3s;
}
.inactive {
width: 0;
overflow: hidden;
}
.button {
height: 20px;
}
Нужно сделать анимация раскрытия списка слева направо при раскрытии, и справа налево при закрытии. Может есть какие то библиотеки, пробовал react-motion и react-spring