如何将宽度缓入过渡应用到元素？

Question

尝试对此图像应用过渡，我不明白为什么这不起作用，并且宽度样式会立即应用，而不是从函数预期的当前宽度过渡出来。

 <!DOCTYPE html> <html> <body> <img style="" id="myImg" src="https://ae01.alicdn.com/kf/S9c1b79c0b59442d0b36ea6aea9cd266fO/Super-Cat-Bed-Warm-Sleeping-Cat-Nest-Soft-Long-Pluh-Best-Pet-Dog-Bed-For-Dogs.jpg.jpg" height="98"> <p>Click the button to change the width of the image to 300px.</p> <button onclick="myFunction()">Try it</button> <script> function myFunction() { document.getElementById("myImg").style.display = "flex"; document.getElementById("myImg").style.transition = "width 2s"; document.getElementById("myImg").style.width = "300px"; } </script> </body> </html>

Answer 1

您遇到的问题是您正在转换的属性应该最初声明。 无论是内联还是 CSS。

所以我用随机宽度而不是高度改变了你的代码，它现在转换了。

 function myFunction() { document.getElementById("myImg").style.display = "flex"; document.getElementById("myImg").style.transition = "width 2s"; document.getElementById("myImg").style.width = "300px"; }

 <img style="" id="myImg" src="https://ae01.alicdn.com/kf/S9c1b79c0b59442d0b36ea6aea9cd266fO/Super-Cat-Bed-Warm-Sleeping-Cat-Nest-Soft-Long-Pluh-Best-Pet-Dog-Bed-For-Dogs.jpg.jpg" width="105"> <p>Click the button to change the width of the image to 300px.</p> <button onclick="myFunction()">Try it</button>

如何将宽度缓入过渡应用到元素？

问题描述

1 个解决方案

解决方案1
0 已采纳 2022-07-21 20:34:29

如何将宽度缓入过渡应用到元素？

问题描述

1 个解决方案

解决方案1 0 已采纳 2022-07-21 20:34:29

解决方案1
0 已采纳 2022-07-21 20:34:29