Figer une div lors d'une transition

26 janvier 2020 à 23:19:33

Bonsoir,

Je cherche à figer une div lors d'une transition sur le height de la div "hidden_content" :

index.html

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <link href="style.css" type="text/css" rel="stylesheet">
        <title>CSS/JS Test</title>
    </head>

    <body>
        <div class="site_main_container">
            <button type="button" class="button_style" onclick="showHiddenContent()">Press to show / hide</button>
            <div class="hidden_content" data-is-shown="false">
                <div class="box_item"><p>BOX ITEM</p></div>
                <div class="box_item"><p>BOX ITEM</p></div>
            </div>
        </div>
        <script>

            function showHiddenContent(){
                let hidden_content = document.getElementsByClassName("hidden_content")[0];

                if(hidden_content.dataset.isShown === "false"){
                    hidden_content.dataset.isShown = "true";
                }else{
                    hidden_content.dataset.isShown = "false";
                }

            }
        </script>
    </body>
</html>

style.css

html, body{
    height: 100%;
    margin: 0;
}

.site_main_container{
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: lightgrey;
}

.button_style{
    cursor: pointer;
    font-family: sans-serif;
    font-size: 40px;
    font-weight: bold;
    padding: 20px;
    border: none;
    border-radius: 10px;
    background-color: rgb(0, 50, 255);
    color: white;
    box-shadow: 0px 0px 0px 1px rgb(0,0,0,0.4);
    transition: background-color 0.2s;
}

.button_style:hover{
    background-color: rgb(0,110,255);
}

.hidden_content{
    display: flex;
    flex-direction: row;
    margin-top: 20px;
    border: 2px solid black;
}

.hidden_content *{
    transition: height 2s;
}

.hidden_content[data-is-shown="false"] .box_item{
    visibility: hidden;
    height: 0px;
}

.hidden_content[data-is-shown="true"] .box_item{
    visibility: visible;
    height: 100px;
}

.box_item{
    font-family: sans-serif;
    font-size: 40px;
    font-weight: bold;
    background-color: blue;
    color: white;
    margin-left: 20px;
    margin-right: 20px;
}

Le problème est que lors du clic sur "Press to show / hide", le conteneur du bouton est déplacé alors que je souhaite que celui-ci reste figé et que le "hidden_content" se "déroule" en dessous.

Merci d'avance

Développeur Web autodidacte HTML5/CSS3/JS + C# (ASP.NET Core) / Python (Django)

AbcAbc6

27 janvier 2020 à 1:12:25

Bonsoir,

Tu centre verticalement tout ton contenu, puis tu dis, la hauteur de mon contenu s'agrandit. Ce que flexbox fait, il répartit l'espace restant sur le haut et le bas. Donc tout bouge.

Pour que le bouton ne bouge pas, soit

tu n'utilises pas flexbox (puisque tu ne souhaites pas d'éléments flexible sur la hauteur), il existe d'autre façon de centrer verticalement.
Tu fixes la hauteur du contenu caché, de sorte que tout le contenu (visible et cacher) soit centrer verticalement et ne change pas.

PS : Je n'ai, pour ma part, pas compris le choix de la double techno CSS et JS. Pour moi soit tu fais tout en JS soit tout en CSS.

Un autre exemple en CSS uniquement.

<!DOCTYPE html>
<html lang="fr">
    <head>
        <meta charset="utf-8">
        <style>
              body{
                margin: 0;
            }

            .site_main_container{
                height: 100vh;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                background-color: lightgrey;
            }

            .button_style{
                cursor: pointer;
                font-family: sans-serif;
                font-size: 40px;
                font-weight: bold;
                padding: 20px;
                border: none;
                border-radius: 10px;
                background-color: rgb(0, 50, 255);
                color: white;
                box-shadow: 0px 0px 0px 1px rgba(0,0,0,0.4);
                transition: background-color 0.2s;
            }

            .button_style:hover{
                background-color: rgb(0,110,255);
            }

            .hidden_content{
                display: flex;
                flex-direction: row;
                margin-top: 20px;
                /*border: 2px solid black;*/
                height: 100px; /* Hauteur du conenu de la box_item   */
            }

            .box_item{
                font-family: sans-serif;
                font-size: 40px;
                font-weight: bold;
                background-color: blue;
                color: white;
                margin-left: 20px;
                margin-right: 20px;
            }

            [type="checkbox"] {
                display: none;
            }
            [type="checkbox"] + .hidden_content .box_item {
                transition: all 2s;
                visibility: hidden;
                height: 0;
            }
            
            [type="checkbox"]:checked + .hidden_content .box_item {
                transition: all 2s;
                visibility: visible;
                height: 100px;
            }
        </style>
        <title>only CSS show / hide</title>
    </head>

    <body>
        <div class="site_main_container">
            <label for="checkbox" class="button_style" >Press to show / hide</label>
            <input type="checkbox" id="checkbox">
            <div class="hidden_content">
                <div class="box_item"><p>BOX ITEM</p></div>
                <div class="box_item"><p>BOX ITEM</p></div>
            </div>  
        </div>
    </body>
</html>

Je pense que tu aurais un meilleurs rendu en utilisant les animations @keyframe.