CSS Animieren statt

Die kurze ist, habe ich drei div Container mit einem . In jedem ist eine div mit einer Hintergrundfarbe 100% Breite und Höhe festgelegt. Die Idee ist, dass, wenn ich sie anklicke, das Wasser von oben nach unten auslaufen sollte. Ich mache dies, indem ich die interne div Höhe von 100% zu 0% mit Übergang umschalte. Allerdings lässt dies das Wasser einfach schweben. Also habe ich den größten Teil des Nachmittags gesucht und habe mir nichts ausgedacht. Ich bin auf der Suche nach der einfachsten Art, es einfach rückwärts laufen zu lassen oder die y-Achse sozusagen umzudrehen, was auf dem Gesicht nicht so schwierig sein kann, oder?CSS Animieren statt

Wie auch immer, hier ist ein Code-Stift, weil jsfiddle CSS-Animation erlauben, was ich versuche zu tun. https://codepen.io/anon/pen/NgYEKE

function func1(buttonname) { 
 
    var x = document.getElementById(buttonname).className; 
 

 
    if (x = "full") { 
 
     document.getElementById(buttonname).className = "empty"; 
 
    } else { 
 
     document.getElementById(buttonname).className = "full"; 
 
    } 
 
}

.full { 
 
    height: 100%; 
 
    transition:height 2s; 
 
} 
 

 
.empty { 
 
    height: 0%; 
 
    transition: height 2s; 
 
}

<body style="background-color:black;"> 
 
    <div style="display:flex;justify-content:center;align-content:center;"> 
 
     <div id="glass1" style="height:50px;width:25px;border:2px solid blue;margin: 3px;"> 
 
      <div id="water1" class="full" style="width:100%;background-color:aqua;"></div> 
 
     </div> 
 
     <div id="glass2" style="height:50px;width:25px;border:2px solid blue;margin: 3px;"> 
 
      <div id="water2" class="full" style="width:100%;background-color:aqua;"></div> 
 
     </div> 
 
     <div id="glass3" style="height:50px;width:25px;border:2px solid blue;margin: 3px;"> 
 
      <div id="water3" class="full" style="width:100%;background-color:aqua;"></div> 
 
     </div> 
 
    </div> 
 
    <div style="display:flex;justify-content:center;align-content:center;"> 
 
     <button id="button1" onclick="func1(this.innerHTML)">water1</button> 
 
     <button id="button2" onclick="func1(this.innerHTML)">water2</button> 
 
     <button id="button3" onclick="func1(this.innerHTML)">water3</button> 
 
    </div> 
 
</body>

Auf einer seitlichen Anmerkung auch ich glaube, ich richtig die Javascript zwischen den leeren und vollen Klassen wechseln geschrieben haben, scheint aber nur eine Möglichkeit, zu arbeiten, wenn Sie eine Idee haben, was Ich habe es falsch gemacht, es würde auch helfen.

Quelle

2017-07-02 Simon Green

2 Dinge:

1.) Im if Zustand x == "full" statt x = "full" sein, es hat

2.) In meinem Ausschnitt unten styled ich das "Wasser" als positioniertes Element mit den Einstellungen top: 0px; bottom: 0; right: 0; left: 0 (keine height Einstellung) und animierte/überführte die top Einstellung, so bottom bleibt bei 0 die ganze Zeit. Jetzt leert das "Wasser" von oben, und Sie können es auch mit einem weiteren Klick von unten nach oben "auffüllen". (Ich zog auch die CSS von Inline zu externem es einfacher zu machen BTW zu begreifen,)

function func1(buttonname) { 
 
\t var x = document.getElementById(buttonname).className; 
 

 
\t if ((x == "full")) { 
 
\t \t document.getElementById(buttonname).className = "empty"; 
 
\t } else { 
 
\t \t document.getElementById(buttonname).className = "full"; 
 
\t } 
 
}

body { 
 
\t background-color: black; 
 
} 
 
#glass1, #glass2, #glass3 { 
 
\t position: relative; 
 
\t height: 50px; 
 
\t width: 25px; 
 
\t border: 2px solid blue; 
 
\t margin: 3px; 
 
} 
 
.full { 
 
\t position: absolute; 
 
\t top: 0px; 
 
\t bottom: 0; 
 
\t left: 0; 
 
\t right: 0; 
 
\t transition: all 2s; 
 
\t background-color: aqua; 
 
} 
 
.empty { 
 
\t position: absolute; 
 
\t top: 100%; 
 
\t bottom: 0; 
 
\t left: 0; 
 
\t right: 0; 
 
\t transition: all 2s; 
 
\t background-color: aqua; 
 
}

<div style="display:flex;justify-content:center;align-content:center;"> 
 
<div id="glass1"> 
 
<div id="water1" class="full" ></div> 
 
</div> 
 
<div id="glass2"> 
 
<div id="water2" class="full" ></div> 
 
</div> 
 
<div id="glass3"> 
 
<div id="water3" class="full"></div> 
 
</div> 
 
</div> 
 
<div style="display:flex;justify-content:center;align-content:center;"> 
 
<button id="button1" onclick="func1(this.innerHTML)">water1</button> 
 
<button id="button2" onclick="func1(this.innerHTML)">water2</button> 
 
<button id="button3" onclick="func1(this.innerHTML)">water3</button> 
 
</div>

Quelle

2017-07-03 00:03:42 Johannes

Dies war die umfassendste Antwort und die Animation ist auch die robustere Option. Der einzige Nachteil ist, dass es die Höhe des Containers wissen muss. Diejenigen, die nach einer Alternative suchen, wenn die Höhe des Containers nicht bekannt ist, sollten sich die ScaleY-Option ansehen, die in Aziz's Post beschrieben wird. Beachten Sie jedoch, dass die scaleY-Lösung Probleme mit dem Wechseln von Klassen hat, bevor der Übergang abgeschlossen wurde. –

@SimonGreen Nach deinem Kommentar habe ich mein Snippet noch einmal bearbeitet: Anstelle des px-Wertes für 'top' (leer) kannst du auch 'top: 100%' verwenden, also musst du * nicht * kenne die Höhe des Containers. – Johannes

Die Elementhöhe beginnt von oben nach unten, Sie können stattdessen die scaleY Transformation verwenden, während Sie eine bottom transform-origin deklarieren.

Demo

div { 
 
    height: 200px; 
 
    width: 50px; 
 
    border: 1px solid; 
 
} 
 

 
div div { 
 
    height: 100%; 
 
    background: blue; 
 
    transform-origin: bottom; 
 
    transition: transform 2s; 
 
} 
 

 
div div:hover { 
 
    transform: scaleY(0); 
 
}

<div> 
 
    <div></div> 
 
</div>

Quelle

2017-07-02 19:49:32 Aziz

Danke Aziz, das hat mich auf dem richtigen Weg. Ich scheinen so auf die Transformation der Höhe, die ich nicht nach anderen Möglichkeiten, um es nur zu tun, wie es rückwärts gehen einmal vorgenommen wurden, wurden beide auf Transformation von unten und scaley alles funktioniert konzentriert. –

Sie können die Glaselemente eine relative Position und die Wasserelemente eine absolute Position von unten

.glass { 
    position: relative; 
} 

.water { 
    position: absolute; 
    bottom: 0px; 
}

gelten Und diese Klassen gelten zu deinen Elementen so:

<div class="glass" id="glass1" style="height:50px;width:25px;border:2px solid blue;margin: 3px;"> 
    <div class="water" id="water1" class="full" style="width:100%;background-color:aqua;"></div> 
    </div>

Auch gibt es einen Fehler in der Klick-Funktion,

if (x = "full"){

wird die Variable zuweisen, sollte == vergleichen verwenden. Ich denke, das ist ein Demo-Tippfehler

Quelle

2017-07-02 20:06:50 Sergio10

Dank Sergio, das ist mein schlechtes, ich benutze kaum Javascript, also habe ich nur versucht, andere Programmierlogik anzuwenden. –

Ihr wenn ist falsch, Sie setzen immer full Zustand. Wechsel zum Vergleich es funktioniert perfekt.

function func1(buttonname) { 
 
    var x = document.getElementById(buttonname).className; 
 

 
    if (x == "full") { 
 
     document.getElementById(buttonname).className = "empty"; 
 
    } else { 
 
     document.getElementById(buttonname).className = "full"; 
 
    } 
 
}

.full { 
 
    height: 100%; 
 
    transition:height 2s; 
 
} 
 

 
.empty { 
 
    height: 0%; 
 
    transition: height 2s; 
 
}

<body style="background-color:black;"> 
 
    <div style="display:flex;justify-content:center;align-content:center;"> 
 
     <div id="glass1" style="height:50px;width:25px;border:2px solid blue;margin: 3px;"> 
 
      <div id="water1" class="full" style="width:100%;background-color:aqua;"></div> 
 
     </div> 
 
     <div id="glass2" style="height:50px;width:25px;border:2px solid blue;margin: 3px;"> 
 
      <div id="water2" class="full" style="width:100%;background-color:aqua;"></div> 
 
     </div> 
 
     <div id="glass3" style="height:50px;width:25px;border:2px solid blue;margin: 3px;"> 
 
      <div id="water3" class="full" style="width:100%;background-color:aqua;"></div> 
 
     </div> 
 
    </div> 
 
    <div style="display:flex;justify-content:center;align-content:center;"> 
 
     <button id="button1" onclick="func1(this.innerHTML)">water1</button> 
 
     <button id="button2" onclick="func1(this.innerHTML)">water2</button> 
 
     <button id="button3" onclick="func1(this.innerHTML)">water3</button> 
 
    </div> 
 
</body>

Quelle

2017-07-02 23:24:05

CSS Animieren statt

Antwort

Verwandte Themen