1.Warum gibt es beim Verkleinern keinen Animationseffekt?
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 (gelöst)
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
因为我们所能看到的过渡动画，其实是height值的变化过程，而你在hover属性中，并没有给height赋予明确的值，因此在移出鼠标之后，浏览器其实并不知道该从哪个值变化到初始值，于是就直接返回到初始值，所以没有过渡效果
原因如1楼所说。可以设置
height:100%;。