应用样式转换时会触发浏览器事件：scale（xValue，yValue）

Question

在我的网页中，当transform属性应用于div标签时，我需要使用JavaSCript处理更改。我的方法是使用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);

请告诉我在缩放元素后是否有任何事件被触发。

或者我是否需要使用任何其他方式来处理这种情况？

注意：尝试过animationstart，animationend，transitionend事件监听器

Answer 1

当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>