JSFiddle - React, Tailwind, and code Playground

by pashkes

HTML

<div id="some-id"></div>
<button style="transform: translateX(0)">click</button>
<button class="reset" style="transform: translateX(0)">reset</button>

CSS

#some-id {
  width: 100px;
  height: 100px;
  background-color: orange;
}

JavaScript

// выбираем целевой элемент
var target = document.getElementById('some-id');
 
// создаём экземпляр MutationObserver
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    console.log(mutation.type);
  });    
});
 
// конфигурация нашего observer:
var config = {attributes: true, childList: true, characterData: true };
 
// передаём в качестве аргументов целевой элемент и его конфигурацию
observer.observe(target, config);
var x = 40;
document.querySelector('button').addEventListener('click', function(){
	
	target.style.transform = 'translateX(' + x + 'px)';
  x = x + 40;
})

document.querySelector('.reset').addEventListener('click', function(){
	target.style.transform = 'translateX(0px)';
  x = 0;
})