web-dev-qa-db-fra.com

Ajouter une transition CSS3 expand/collapse

Comment ajouter une transition développer/réduire?

http://jsfiddle.net/Bq6eK/1

csscss3
34
Felix

Voici ma solution qui ajuste automatiquement la hauteur: http://jsfiddle.net/9ccjE/

J'ai utilisé la solution de contournement publiée par r3bel: Pouvez-vous utiliser CSS3 pour passer de height: 0 à la hauteur variable du contenu?

30
Felix

cela devrait fonctionner, je devais essayer un peu aussi ..: D

animation css3 jsfiddle

8
r3bel

http://jsfiddle.net/Bq6eK/215/

Je n'ai pas modifié votre code pour cette solution, j'ai écrit le mien à la place. Ma solution ne correspond pas exactement à ce que vous avez demandé, mais vous pourriez peut-être en tirer parti avec les connaissances existantes. J'ai également commenté le code afin que vous sachiez exactement ce que je fais des modifications.

Pour éviter "de définir la hauteur en JavaScript", je viens de faire de "maxHeight" un paramètre de la fonction JS appelé toggleHeight. Maintenant, il peut être défini dans le code HTML pour chaque div de la classe extensible.

Je vais le dire dès le départ, je ne suis pas très familiarisé avec les langues front-end et je dois cliquer sur le bouton "Afficher/masquer" deux fois pour commencer avant le début de l'animation. Je soupçonne que c'est un problème de concentration.

L'autre problème avec ma solution est que vous pouvez réellement déterminer le texte masqué sans appuyer sur le bouton Afficher/Masquer en cliquant simplement sur le div et en le faisant glisser, vous pouvez mettre en surbrillance le texte non visible et le coller dans un espace visible. .

Ma suggestion pour une étape suivante en plus de ce que j'ai fait est de faire en sorte que le bouton afficher/masquer change de manière dynamique. Je pense que vous pouvez comprendre comment faire cela avec ce que vous semblez déjà savoir sur l'affichage et le masquage de texte avec JS.

2
user1530315

Voici une solution qui n’utilise pas du tout JS. Il utilise cases à cocher à la place.

Vous pouvez masquer la case en l'ajoutant à votre CSS:

.container input{
    display: none;
}

Ajoutez ensuite un peu de style pour qu'il ressemble à un bouton .

Voici le code source que j'ai modifié.

0
user1530315

OMG, j'ai essayé de trouver une solution simple à ce problème pendant des heures. Je savais que le code était simple mais personne ne m'a fourni ce que je voulais. Nous avons donc finalement pu travailler sur un exemple de code et en faire quelque chose de simple: personne ne peut utiliser aucun JQuery requis. Simple javascript et css et html. Pour que l'animation fonctionne, vous devez définir la hauteur et la largeur, sinon l'animation ne fonctionnera pas. Trouvé cela de manière difficile.

<script>
        function dostuff() {
            if (document.getElementById('MyBox').style.height == "0px") {

                document.getElementById('MyBox').setAttribute("style", "background-color: #45CEE0; height: 200px; width: 200px; transition: all 2s ease;"); 
            }
            else {
                document.getElementById('MyBox').setAttribute("style", "background-color: #45CEE0; height: 0px; width: 0px; transition: all 2s ease;"); 
             }
        }
    </script>
    <div id="MyBox" style="height: 0px; width: 0px;">
    </div>

    <input type="button" id="buttontest" onclick="dostuff()" value="Click Me">
0
Deathstalker