В таком случае у вас будут дорисовываться только ново-пришедшие данные в комонент-родитель..
handleButtonClick = e => {
e.stopPropagation();
// do something else
};if(!Onclick){
choose
}function task_parking(nameOfClass) { return <svg viewBox="0 0 22 22" width="22" className = {nameOfClass}>
<path fill="#FFF" className="back" d="M4 20.5c-1.4 0-2.5-1.1-2.5-2.5V4c0-1.4 1.1-2.5 2.5-2.5h14c1.4 0 2.5 1.1 2.5 2.5v14c0 1.4-1.1 2.5-2.5 2.5H4z" />
<path fill= '#739eff' className="border" d="M18 2c1.1 0 2 0.9 2 2v14c0 1.1-0.9 2-2 2H4c-1.1 0-2-0.9-2-2V4c0-1.1 0.9-2 2-2H18M18 1H4C2.3 1 1 2.3 1 4v14c0 1.7 1.3 3 3 3h14c1.7 0 3-1.3 3-3V4C21 2.3 19.7 1 18 1L18 1z"/>
<path fill= '#739eff' className="symbol" d="M12 7h-2H8v6 2h2v-2h2c1.1 0 3-1.1 3-3S13.1 7 12 7zM12 11h-2V9h2c0 0 1 0.2 1 1S12 11 12 11z" />
</svg>
}let curr = this.route.scrollLeft;
var requestId = 0;
let now = window.performance.now();
function quad(progress) {
return Math.pow(progress, 2)
}
let animate = (time) => {
var progress = (time - now) / 200;
console.log(progress, time - now );
if(progress>1){
progress = 1
}
if(this.startx > this.endx){//to right
this.route.scrollLeft = curr + (this.list.children[0].offsetWidth*progress);
}
if(this.startx < this.endx){//to left
this.route.scrollLeft = curr - (this.list.children[0].offsetWidth*progress);
}
if(progress == 1){
stop()
return
}
requestId = window.requestAnimationFrame(animate);
}
function start() {
let animationStartTime = window.performance.now();
requestId = window.requestAnimationFrame(animate);
}
function stop() {
if (requestId)
window.cancelAnimationFrame(requestId);
requestId = 0;
}
if(Math.abs(this.endx - this.startx) > 10 ){
start();
}И что значит "чтобы не остановилось раньше времени"?
setTimeout(stop(), 200);