JSFiddle - React, Tailwind, and code Playground

HTML

<div class='container'>
  <div class='block'></div>
</div>
<button id='switch'>
toggle
</button>
<button id='pause'>
pause/resume
</button>
<button id='calc'>
calc
</button>

CSS

.container {
  border: 1px dashed red;
}

.block::before {
  content: '';
  display: block;
  width: 50px;
  height: 50px;
  background-color: blue;
}

.block {
  transition: transform 500ms linear;
  transform: translateX(0);
}

.block.toggled {
  transform: translateX(calc(100% - 50px));
}

JavaScript

const
	block = document.querySelector('.block'),
  pauseButton = document.getElementById('pause'),
	blockStyle = block.style,
  transitionDuration = parseFloat(
  	window.getComputedStyle(block).transitionDuration
  ) * 1000;
  console.log(transitionDuration);

let stamp, transitionTimeLeft = transitionDuration;

const pauseHandler = () => {
  const transform = window.getComputedStyle(block)
  .transform;
  if (blockStyle.transform) {
    blockStyle.transform = '';
    blockStyle.transitionDuration =
      transitionTimeLeft + 'ms';
    stamp = Date.now();
  } else {
    blockStyle.transform = transform;
    blockStyle.transitionDuration = '0s';
    transitionTimeLeft -= Date.now() - stamp;
  }
}

document.getElementById('switch').addEventListener(
	'click',
  () => {
  	block.classList.toggle('toggled');
    if (blockStyle.transitionDuration) {
    	transitionTimeLeft =
      	transitionDuration - transitionTimeLeft;
    } else {
    	stamp = Date.now();
    }
    pauseButton.addEventListener('click', pauseHandler);
  }
);

document.getElementById('calc').addEventListener(
	'click',
  () => {
  	console.log(
    	blockStyle.transitionDuration,
      parseFloat(
      	getComputedStyle(block).transitionDuration
      ) * 1000 + 'ms',
      transitionTimeLeft
    );
  }
);


block.addEventListener(
	'transitionend',
  () => {
  	blockStyle.transitionDuration = '';
    transitionTimeLeft = transitionDuration;
    pauseButton.removeEventListener('click', pauseHandler);
  }
);