Menu
The short is I have three div containers with a border.
Inside each is a div with a background color set to 100% width and height.
The idea is that when I click them the water should empty out, top to bottom.
I do this by switching the internal div's height from 100% to 0% with transition.
However of course this just makes the water levitate up.
So I've been looking for most of the afternoon and haven't come up with anything.
I'm looking for the most simple way of just making it go backwards or to flip the y axis as it were, which on the face of it can't be that difficult, can it?
Anyway, here's a code pen, because jsfiddle want allow css animation, of what I'm Trying to do. 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>On a side note I also believe I have correctly written the Javascript to switch between the empty and full classes but only seems to work one way, if you have any idea what I did wrong there it would also help.
914
asked Nov 19 '25 01:11
Element height starts from top to bottom by design, you can use the scaleY transformation instead while declaring a bottom transform-origin.
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>2 things:
1.) In the if condition it has to be x == "full" instead of x = "full"
2.) In my snippet below I styled the "water" as an absolute positioned element with settings top: 0px; bottom: 0; right: 0; left: 0 (no height setting) and animated/transitioned the top setting, so bottom stays at 0 all the time. Now the "water" empties from the top, and you also can "refill" it with another click from bottom to top. (I also moved the CSS from inline to external to make it easier to comprehend, BTW)
function func1(buttonname) {
var x = document.getElementById(buttonname).className;
if ((x == "full")) {
document.getElementById(buttonname).className = "empty";
} else {
document.getElementById(buttonname).className = "full";
}
}body {
background-color: black;
}
#glass1, #glass2, #glass3 {
position: relative;
height: 50px;
width: 25px;
border: 2px solid blue;
margin: 3px;
}
.full {
position: absolute;
top: 0px;
bottom: 0;
left: 0;
right: 0;
transition: all 2s;
background-color: aqua;
}
.empty {
position: absolute;
top: 100%;
bottom: 0;
left: 0;
right: 0;
transition: all 2s;
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>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
