javascript - transition height auto 過(guò)渡動(dòng)畫
問(wèn)題描述
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(己解決)
問(wèn)題解答
回答1:因?yàn)槲覀兯芸吹降倪^(guò)渡動(dòng)畫,其實(shí)是height值的變化過(guò)程,而你在hover屬性中,并沒有給height賦予明確的值,因此在移出鼠標(biāo)之后,瀏覽器其實(shí)并不知道該從哪個(gè)值變化到初始值,于是就直接返回到初始值,所以沒有過(guò)渡效果
回答2:原因如1樓所說(shuō)。可以設(shè)置height:100%;。
回答3:.container:hover { height: 100%; // 這個(gè)要明確值 max-height: 100%; bottom: 0px;}
相關(guān)文章:
1. boot2docker無(wú)法啟動(dòng)2. docker-compose中volumes的問(wèn)題3. 關(guān)docker hub上有些鏡像的tag被標(biāo)記““This image has vulnerabilities””4. docker容器呢SSH為什么連不通呢?5. java - SSH框架中寫分頁(yè)時(shí)service層中不能注入分頁(yè)類6. dockerfile - 為什么docker容器啟動(dòng)不了?7. 關(guān)于docker下的nginx壓力測(cè)試8. docker安裝后出現(xiàn)Cannot connect to the Docker daemon.9. node.js - antdesign怎么集合react-redux對(duì)input控件進(jìn)行初始化賦值10. nignx - docker內(nèi)nginx 80端口被占用

網(wǎng)公網(wǎng)安備