28172 sujets

CSS et mise en forme, CSS3

Transition CSS

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 : 

<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");
}
Modérateur
Bonjour,

ton soucis vient de height:0; qui passe à height:fit-content; Il n'y aucune transition possible entre ces deux là . fit-content n'est pas une valeur numerique .

Tu peut éventuellement tester un max-height:0; et un max-height:100vh; Entre 0 et 100vh, une transition pourra être calculée en créant des étapes entre ces deux chiffres.

Tu pourrait aussi te servir de JavaScript pour injecter la véritable hauteur de ta boite au lieu de fit-content.

Cdt
Modifié par gcyrillus (18 May 2022 - 01:12)
Bonjour,

Merci beaucoup le problème a été résolue grâce a sa, sa sacade encore mais c'est un detail c'est pas grave
Sujet clos
Aller à