javascript - transition height auto 過渡動(dòng)畫
問題描述
1.為什么收縮時(shí)，沒有動(dòng)畫效果？
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)'>開關(guān)</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：因?yàn)槲覀兯芸吹降倪^渡動(dòng)畫，其實(shí)是height值的變化過程，而你在hover屬性中，并沒有給height賦予明確的值，因此在移出鼠標(biāo)之后，瀏覽器其實(shí)并不知道該從哪個(gè)值變化到初始值，于是就直接返回到初始值，所以沒有過渡效果
回答2：原因如1樓所說。可以設(shè)置height:100%;。
回答3：.container:hover { height: 100%; // 這個(gè)要明確值 max-height: 100%; bottom: 0px;}
相關(guān)文章：
1. 數(shù)據(jù)庫 - Mysql的存儲過程真的是個(gè)坑！求助下面的存儲過程哪里錯(cuò)啦，實(shí)在是找不到哪里的問題了。2. php傳對應(yīng)的id值為什么傳不了啊有木有大神會的看我下方截圖3. 如何用筆記本上的apache做微信開發(fā)的服務(wù)器4. python - linux怎么在每天的凌晨2點(diǎn)執(zhí)行一次這個(gè)log.py文件5. 關(guān)于mysql聯(lián)合查詢一對多的顯示結(jié)果問題6. 冒昧問一下，我這php代碼哪里出錯(cuò)了？？？7. windows誤人子弟啊8. mysql優(yōu)化 - MySQL如何為配置表建立索引？9. MySQL主鍵沖突時(shí)的更新操作和替換操作在功能上有什么差別(如圖)10. 實(shí)現(xiàn)bing搜索工具urlAPI提交
網(wǎng)公網(wǎng)安備