javascript - transition height auto 過渡動畫
問題描述
1.為什么收縮時，沒有動畫效果？
2.代碼
<!DOCTYPE html><html lang='en'><head> <title></title> <meta charset='UTF-8'> <meta name='viewport' content='width=device-width, initial-scale=1'> <style>* { transition: all .6s;}.container { position: fixed; top: 0; left: 0; right: 0; height: 100px; max-height: 100px; width: 100px; margin: 5px auto; background: RGBA(0, 43, 54, 0.80); overflow: hidden; text-align: center;}.container:hover { height: auto; max-height: 100%; bottom: 0px;} </style></head><body> <p class='sketch'><p class='container'> <!--<a href='javascript:void(0)'>開關</a>--></p> </p> <!--<script>const classList = document.querySelector(’.container’).classList;document.querySelector(’#switch’).addEventListener(’click’, function (e) { if (classList.contains(’expand’)) {document.querySelector(’.container’).classList.remove(’expand’); } else {document.querySelector(’.container’).classList.add(’expand’); }}); </script>--></body></html>
3.在線Demo(己解決)
問題解答
回答1：因為我們所能看到的過渡動畫，其實是height值的變化過程，而你在hover屬性中，并沒有給height賦予明確的值，因此在移出鼠標之后，瀏覽器其實并不知道該從哪個值變化到初始值，于是就直接返回到初始值，所以沒有過渡效果
回答2：原因如1樓所說。可以設置height:100%;。
回答3：.container:hover { height: 100%; // 這個要明確值 max-height: 100%; bottom: 0px;}
相關文章：
1. java - mongodb分片集群下，count和聚合統計問題2. javascript - vue 移動端的input 數字輸入優化3. java - 自己制作一個視頻播放器，遇到問題，用的是內置surfaceview類，具體看代碼！4. javascript - 有什么兼容性比較好的辦法來判斷瀏覽器窗口的類型？5. 服務器端 - 采用nginx做web服務器，C++開發應用程序 出現拒絕連接請求？6. 為什么我ping不通我的docker容器呢？？？7. python - pandas按照列A和列B分組，將列C求平均數，怎樣才能生成一個列A,B,C的dataframe8. 關于docker下的nginx壓力測試9. javascript - npm start 運行’webpack-dev-server’報錯 Cannot find module ’webpack’10. java 隨機延遲執行
網公網安備