不使用比例缩放图像

Question

Working on creating my own carousel. The idea is that the image zooms in slowly at the start of each carousel "page".

To achieve the result I'm looking for, all I have to do is change the scale of the background image using a transition. Simply wrap it in a container with overflow:hidden and it works. The problem is that the next carousel page needs to start its image "zoomed out". So the scale needs to be set to 1 again. However, since the CSS class has the transition, zooming out isn't instant.

The solution to that problem should be to simply remove the class from the element. Then change the scale and finally add the class back in. However, for some reason, that doesn't seem to work.

Another issue is that scale seems to have a very bad browser support at the moment: https://caniuse.com/?search=scale

 let scaled = false; const test = document.getElementById("test"); window.addEventListener("click", function() { if(scaled) { // Remove the class test.classList.remove("foo"); scaled = false; // Reset the scale test.style.transform = "scale(1)"; // Add class back in making sure the animation should be updated window.requestAnimationFrame(() => { test.classList.add("foo"); }); } else { // Leave the animation running scaled = true; test.style.transform = "scale(0.5)"; } })

 .foo { width: 500px; height: 500px; background: blue; transition: transform 2s; }

 <div id="test" class="foo"> </div>

You'll have to run the above snipped in Firefox or Safari as scale is not supported in other browsers at this time.

On the first click, the animation plays as it should. On the second click, the animation still plays while it shouldn't as the class has been removed.

Is there an alternative way to achieve the same effect? (so don't use scale at all) Why is it playing the animation anyway despite the class being removed?

Answer 1

The problem based on Event Loop . You can try this solution with width if you like, but actually not sure that cover you needs.

 const test = document.getElementById("test"); window.addEventListener("click", function() { test.style.transition = 'none' test.style.width = '100%'; window.requestAnimationFrame(() => { test.style.width = "50%"; test.style.transition = 'width 2s' }); })

 .foo { width: 500px; height: auto; background: blue; }

 <img src="https://images.freeimages.com/images/large-previews/76e/abstract-1-1174741.jpg" class="foo" id="test"/>