Делаю компонент по заполнению шкалы (код далеко не идеален, не до этого пока что):
App.js
import React from "react";
import "./styles.css";
export default function App() {
const [chanels, setChanels] = React.useState([
{
name: "chanel1",
color: "blue",
memoryPercent: 30
},{
name: "chanel2",
color: "grey",
memoryPercent: 70
}]
)
return (
<div className="App">
<div className="scale">
{chanels.map(chanel =>
<div
style={{
background: chanel.color,
width: `${chanel.memoryPecent}%`
}}>
{chanel.name}
</div>
)}
</div>
<button>+</button>
chanel1
<button>-</button>
<button>+</button>
chanel2
<button>-</button>
</div>
);
}
style.css:
.App {
font-family: sans-serif;
text-align: center;
}
.scale {
width: 100%;
background: red;
height: 20px;
display: flex;
}
Суть следующая:
По нажатию на +/- происходит смена диапазона у нужного канала и данные о смененном диапазоне отправляются на сервер. На сервере происходит перерасчет занимаемого диапазона у каналов и обновленный объект оправляется обратно на клиент.
Вопрос:
Реально ли анимировать изменение ширины каждого канала в зависимости от данных которые пришли с сервера? Например:
Сейчас memoryPercent
у chanel1 = 30
%, после того как я отправил запрос на увеличение диапазона у chanel1
- я получил с сервера обновленный объект: memoryPercent
у chanel1
стал равен 40
, а у chanel2 = 60
.
Или разумнее анимировать это все с помощью данных которые уже есть в state
?