1.Pourquoi n'y a-t-il pas d'effet d'animation lors du rétrécissement ?
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. Démo en ligne (résolu)
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
Parce que l'animation de transition que nous pouvons voir est en fait le processus de changement de la valeur height, et que vous n'avez pas attribué de valeur claire à height dans l'attribut hover, donc après avoir déplacé la souris, le navigateur en fait je Je ne sais pas de quelle valeur passer à la valeur initiale, donc je reviens directement à la valeur initiale, donc il n'y a pas d'effet de transition
La raison est celle mentionnée au 1er étage. Peut être réglé
height:100%;.