1. Why is there no animation effect when shrinking?
2.Code
<!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)">开关</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. Online Demo (solved)
ringa_lee2017-05-16 13:23:31
Because the transition animation we can see is actually the changing process of the height value, and you did not assign a clear value to height in the hover attribute, so after moving the mouse out, the browser actually I don’t know which value to change from to the initial value, so I just return to the initial value directly, so there is no transition effect
伊谢尔伦2017-05-16 13:23:31
.container:hover {
height: 100%; // 这个要明确值
max-height: 100%;
bottom: 0px;
}