javascript - transition height auto 過(guò)渡動(dòng)畫(huà)
問(wèn)題描述
1.為什么收縮時(shí)，沒(méi)有動(dòng)畫(huà)效果？
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)'>開(kāi)關(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(己解決)
問(wèn)題解答
回答1：因?yàn)槲覀兯芸吹降倪^(guò)渡動(dòng)畫(huà)，其實(shí)是height值的變化過(guò)程，而你在hover屬性中，并沒(méi)有給height賦予明確的值，因此在移出鼠標(biāo)之后，瀏覽器其實(shí)并不知道該從哪個(gè)值變化到初始值，于是就直接返回到初始值，所以沒(méi)有過(guò)渡效果
回答2：原因如1樓所說(shuō)。可以設(shè)置height:100%;。
回答3：.container:hover { height: 100%; // 這個(gè)要明確值 max-height: 100%; bottom: 0px;}
相關(guān)文章：
1. android - 使用百度sdk調(diào)用SDKInitializer.initialize(this)時(shí)報(bào)錯(cuò)？2. javascript - 最近用echarts做統(tǒng)計(jì)圖時(shí)遇到兩個(gè)問(wèn)題！！3. javascript - react熱加載的一段代碼4. html5 - 用h5本地存儲(chǔ)是否安全？5. 基于Spring MVC Java的配置無(wú)法正常工作控制臺(tái)顯示無(wú)錯(cuò)誤，但我的jsp頁(yè)面未顯示6. javascript - webpack-dev-server和webpack沖突嗎7. 微信公眾號(hào)在線生成二維碼帶參數(shù)怎么搞？8. android - 優(yōu)酷的安卓及蘋(píng)果app還在使用flash技術(shù)嗎？9. 淺談Vue使用Cascader級(jí)聯(lián)選擇器數(shù)據(jù)回顯中的坑10. myeclipse中修改了javaweb的web.xml文件，為什么有時(shí)候會(huì)自動(dòng)重新部署生效，有時(shí)就不會(huì)自動(dòng)呢？
網(wǎng)公網(wǎng)安備