-1

In my webpage, I need to handled changes using JavaSCript when transform property is applied to a div tag. My approach is using eventListeners. But I am not able to find out what event gets triggered when a div tag is scaled.

// 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);

Please let me know is there any event gets triggered after scaling the element.

Or do I need to use any other way to handle this scenario?

Note: tried animationstart, animationend, transitionend events listeners

Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Dip686
  • 641
  • 6
  • 16
  • You don't need a event listener for this as the next line after scaling will get executed straight away. – lthh89vt Jan 24 '19 at 02:48
  • I guess your question is the scaling animation which coming from CSS transition which JS won't be able to know when it's finished. (Probably could but hacky way). So rather using a timeout. – lthh89vt Jan 24 '19 at 02:50
  • Possible duplicate of [How do you detect when CSS animations start and end with JavaScript?](https://stackoverflow.com/questions/14796936/how-do-you-detect-when-css-animations-start-and-end-with-javascript) – Randy Casburn Jan 24 '19 at 02:55
  • I have tried with animation events, transform style does not trigger any animation events @RandyCasburn – Dip686 Jan 24 '19 at 03:03
  • Probably this answer is what you are looking for https://stackoverflow.com/a/41425087/1926369 – vals Jan 24 '19 at 14:03

1 Answers1

1

You can use a Proxy to trigger a function when your style attribute changes. The prop argument in the set callback function defines the style changed, and so you can use an if statement to check what property you are changing.

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>
Nick Parsons
  • 45,728
  • 6
  • 46
  • 64
  • Thanks for the answer, thanks for the answer, but it is only working if we are changing styles using elementStyle object. try once document.getElementById('my-container').style.transform ='scale(0.8,0.9)' separately. My point is what if it is changed from a different script, then how can i handle it. – Dip686 Jan 24 '19 at 03:10