- masyarakat
- Belajar
- Perpustakaan Alatan
- Masa lapang
Rumah > Soal Jawab > teks badan
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)
ringa_lee2017-05-16 13:23:31
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
怪我咯2017-05-16 13:23:31
Sebabnya seperti yang dinyatakan di tingkat 1. Boleh setel height:100%;.
伊谢尔伦2017-05-16 13:23:31
.container:hover {
height: 100%; // 这个要明确值
max-height: 100%;
bottom: 0px;
}