如何將寬度緩入過渡應用到元素？

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