События браузера запускаются при применении стиля transform: scale (xValue, yValue) - PullRequest
Новая
       23

События браузера запускаются при применении стиля transform: scale (xValue, yValue)

0 голосов
/ 24 января 2019

На моей веб-странице мне нужно обрабатывать изменения, используя JavaSCript, когда свойство transform применяется к тегу div. Мой подход использует eventListeners. Но я не могу выяснить, какое событие вызывается при масштабировании тега div. 

// html ement
<div id='my-container'> ... some conetent </div>

// applying CSS style by other modules using javaScript
 document.getElementById('my-container').style.transform ='scale(0.8,0.8)'

// My JS code to handled the support 'my-container' against scale css
document.getElementById('my-container').addEventListener('??????',console.log);

Пожалуйста, дайте мне знать, происходит ли какое-либо событие после масштабирования элемента.

Или мне нужно использовать любой другой способ для обработки этого сценария?

Примечание: пробные анимации, слушатели оконечности и переходных событий

1 Ответ

0 голосов
/ 24 января 2019

Вы можете использовать Proxy для запуска функции при изменении атрибута style.Аргумент prop в функции обратного вызова set определяет измененный стиль, поэтому вы можете использовать оператор if, чтобы проверить, какое свойство вы изменяете. 

const elementStyle = new Proxy(document.getElementById('my-container').style, {set: function(o, prop, style) {
  if(prop == "transform") {
    // todo when style transform changes
    console.log("transform changed");
  }
  o[prop] = style;
}});

elementStyle.transform = "scale(0.8,0.8)"; // triggers console.log
elementStyle.color = "green"; // doesn't trigger function call
<div id='my-container'> ... some conetent </div>
...