Bonjour,
Je rencontre un soucis que je n'arrive pas a fixer ducoup je demande ici si quelqu'un a pas une idée de comme faire. Le problème rencontrer est que au moment d'ouvrir et fermer la bulle le bouton vas directement en bas ou en haut sans transition smooth ce qui n'est pas très beau a mon gout
Merci d'avance
Le HTML :
Le CSS :
Le JS si besoin :
Je rencontre un soucis que je n'arrive pas a fixer ducoup je demande ici si quelqu'un a pas une idée de comme faire. Le problème rencontrer est que au moment d'ouvrir et fermer la bulle le bouton vas directement en bas ou en haut sans transition smooth ce qui n'est pas très beau a mon gout
Merci d'avance
Le HTML :
<body>
<div class="Container">
<div class="Content">
<h1>Test Text</h1>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ea optio deleniti tempore deserunt tenetur distinctio atque, suscipit repellendus unde quasi sint temporibus in, possimus corporis vel. Sint consequatur impedit voluptatum officiis explicabo enim saepe totam maiores doloribus tenetur, odit a deserunt quam, sunt sapiente nisi neque unde itaque corrupti dignissimos, facere excepturi voluptates! Adipisci minima odio eligendi ad, cum labore ex dignissimos explicabo harum molestias quos sit laboriosam repellendus officia debitis necessitatibus facere reprehenderit quas, quasi temporibus. Neque, cumque modi. Quisquam minus, animi facere soluta fugiat minima debitis eveniet vel expedita id eligendi maiores culpa? Distinctio rerum vel odio possimus!</p>
</div>
<div class="BtnToggle"></div>
</div>
<script src="Script.js"></script>
</body>
Le CSS :
*, ::before, ::after {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background-color: #1a242a;
}
.Content h1 {
font-size: 40px;
}
.Content p {
margin-bottom: 20px;
}
.Container {
display: flex;
justify-content: center;
align-items: center;
position: relative;
height: 0;
width: 0;
background-color: #37444b;
border-radius: 30px;
transition: 1s;
}
.Container .Content {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
max-height: fit-content;
min-width: 400px;
padding: 20px;
line-height: 2;
overflow: hidden;
color: #F1F1F1;
opacity: 0;
transform: scale(0);
}
.Container.Active .Content {
opacity: 1;
transition: 1s;
transform: scale(1);
}
.Container.Active {
height: fit-content;
width: 400px;
}
.Container::before {
content: "";
position: absolute;
bottom: -15px;
height: 0;
width: 0;
background-color: #37444b;
transform: rotate(45deg);
}
.Container.Active::before {
height: 50px;
width: 50px;
}
.BtnToggle {
position: absolute;
bottom: -40px;
display: flex;
justify-content: center;
align-items: center;
height: 80px;
width: 80px;
border-radius: 50%;
background-color: lightgreen;
cursor: pointer;
}
.BtnToggle.Active {
bottom: -120px;
background-color: #ff5353;
transform: rotate(45deg);
}
.BtnToggle::before {
content: "+";
font-size: 3rem;
font-weight: 700;
color: #F1F1F1;
}
Le JS si besoin :
var BtnToggle = document.querySelector(".BtnToggle");
var Container = document.querySelector(".Container");
BtnToggle.onclick = function() {
Container.classList.toggle("Active");
BtnToggle.classList.toggle("Active");
}