jQuery .animate() optimization guide as expected on elements with CSS transitions
I need help solving I'm writing unit tests and Hey everyone, I'm running into an issue that's driving me crazy... I've been struggling with this for a few days now and could really use some help. I'm working with an scenario where jQuery's `.animate()` function doesn't seem to work properly on elements that also have CSS transitions applied. For instance, I have a div that I'm trying to animate to change its width and height, but the animation appears jerky and doesn't play smoothly. Here's the jQuery code I'm using: ```javascript $('#myDiv').animate({ width: '300px', height: '300px' }, 500); ``` The CSS for this div includes transitions: ```css #myDiv { width: 100px; height: 100px; transition: width 0.5s ease, height 0.5s ease; } ``` When I trigger the animation, I see the width and height changing, but it feels like both the jQuery animation and CSS transitions are conflicting with each other. It creates a stutter effect rather than a smooth transition. I've tried removing the transition properties, and in that case, the animation works perfectly, but I want to keep the CSS transitions for other scenarios where jQuery isn't involved. Is there a way to resolve this conflict? I've also looked into using `jQuery.fx.step`, but I'm unsure if that would help in this particular case. Any suggestions would be appreciated! I'm working on a web app that needs to handle this. Thanks in advance! I'm working on a API that needs to handle this. Has anyone else encountered this? What are your experiences with this? This is happening in both development and production on Ubuntu 22.04. What am I doing wrong?