1.Mengapa tiada kesan animasi apabila mengecut?
2.Kod
<!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. Demo Dalam Talian (diselesaikan)
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Oleh kerana animasi peralihan yang kita boleh lihat sebenarnya adalah proses perubahan nilai height, dan anda tidak memberikan nilai yang jelas kepada height dalam atribut hover, jadi selepas mengeluarkan tetikus, penyemak imbas sebenarnya saya tidak tahu nilai mana yang hendak ditukar kepada nilai awal, jadi saya hanya kembali ke nilai awal secara langsung, jadi tiada kesan peralihan
Sebabnya seperti yang dinyatakan di tingkat 1. Boleh setel
height:100%;.