Fügen Sie CSS3-Übergang hinzu, erweitern / reduzieren

Wie füge ich einem erweitern/reduzieren-übergang?

http://jsfiddle.net/Bq6eK/1

InformationsquelleAutor der Frage Felix | 2012-07-16

  1. 25

    Dies ist meine Lösung, die passt die Höhe automatisch: http://jsfiddle.net/9ccjE/

    Benutzte ich die Problemumgehung, die r3bel geschrieben: Können Sie verwenden, CSS3 übergang von Höhe:0 an die variable Höhe der Inhalte?

    InformationsquelleAutor der Antwort Felix

  2. 7

    sollte dies funktionieren, hatte, um zu versuchen, eine Weile zu.. 😀

    css3 animation jsfiddle

    InformationsquelleAutor der Antwort r3bel

  3. 2

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

    Ich nicht ändern Sie Ihren code für diese Lösung, ich schrieb meine eigenen statt. Meine Lösung ist nicht ganz das, was Sie gefragt, aber vielleicht könnte man darauf aufbauen mit vorhandenem wissen. Kommentierte ich den code auch damit Sie wissen, was genau mache ich mit den änderungen.

    Als eine Lösung, um "zu vermeiden, die Einstellung der Höhe in JavaScript", ich habe gerade 'maxHeight' einen parameter in der JS-Funktion aufgerufen toggleHeight. Nun es kann eingestellt werden in den HTML-Code für die einzelnen div-Klasse erweiterbar.

    Ich sage dies vorne, ich bin nicht super erfahren mit front-end-Sprachen, und es ist eine Frage, wo muss ich klicken Sie auf die "Show/hide" - Taste zweimal, zunächst, bevor die animation startet. Ich vermute, es ist ein Problem mit dem Fokus.

    Andere Problem mit meiner Lösung ist, dass Sie können tatsächlich herausfinden, was die versteckten text ohne drücken der Schaltfläche ein - /ausblenden durch klicken in das div-Element und ziehen Sie nach unten, können Sie den text markieren, der nicht sichtbar ist und fügen Sie es an einem sichtbaren Platz.

    Mein Vorschlag für einen nächsten Schritt auf der Spitze dessen, was ich getan habe, ist es so zu machen, dass die show/hide-Schaltfläche dynamisch ändert. Ich denke, Sie können herausfinden, wie zu tun, mit dem, was Sie bereits zu wissen scheinen ein-und ausblenden von text mit JS.

    InformationsquelleAutor der Antwort ayang9

  4. 0

    Hier ist eine Lösung, die nicht mit JS überhaupt. Es nutzt Kontrollkästchen statt.

    Können Sie ausblenden das Kontrollkästchen, indem diese Ihre CSS:

    .container input{
    display: none;
}

    Und dann fügen Sie einige styling, um es so Aussehen wie ein button.

    Hier ist der source code, den ich modded.

    InformationsquelleAutor der Antwort ayang9

  5. 0

    OMG, ich habe versucht zu finden, eine einfache Lösung, um diese für Stunden. Ich wusste, dass der code war einfach, aber niemand gab mir was ich wollte. So, endlich zu arbeiten auf einige Beispiel-code, und machte einfach etwas, das jeder benutzen kann kein JQuery erforderlich. Einfache javascript-und css-und html-Format. In Reihenfolge für die animation zu arbeiten, müssen Sie die Höhe und Breite oder die animation nicht funktionieren. Festgestellt, dass die harte Weise.

    <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">

    InformationsquelleAutor der Antwort Deathstalker

Schreibe einen Kommentar