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 id="switch" 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(己解決)
光陰似箭催人老,日月如移越少年。
因?yàn)槲覀兯芸吹降倪^(guò)渡動(dòng)畫(huà),其實(shí)是height值的變化過(guò)程,而你在hover屬性中,並沒(méi)有給height賦予明確的值,而你在移出滑鼠之後,瀏覽器其實(shí)並不知道該從哪個(gè)值變化到初始值,於是就直接回到初始值,所以沒(méi)有過(guò)渡效果