CSS animate down instead of up
In short, I have three containers div
with border
. Inside each one is div
with a background color set to width and height 100%
. The idea is that when I click on them, the water should go down, from top to bottom. I do this by switching the internal height div
from 100%
to 0%
with a transition. However, of course, this just makes the water rise. So I searched most of the day and came up with nothing. I'm looking for the easiest way to just do it backwards or flip the y-axis sort of, which at first glance might not be that hard, can it?
Anyway, here's a handle on the code because jsfiddle wants to allow css animation, which is 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 the side of the note, I also believe that I wrote the Javascript correctly to switch between empty and full classes, but only seems to work in one case, if you have an idea of what I did wrong there it will help as well.
source to share
2 things:
1.) In the condition, if
it should be x == "full"
insteadx = "full"
2.) In my snippet below, I described "water" as a positioned element absolute
with settings top: 0px; bottom: 0; right: 0; left: 0
(not height
) and animated / translated the parameter top
so it bottom
stays at 0 all the time. Now the "water" is emptied from the top and you can also "refill" it with another click from the bottom up. (I've also moved the CSS from inline to external to make it easier to understand, 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>
source to share
Element height starts from top to bottom by design, you can use transform instead by scaleY
declaring 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>
source to share
You can apply glass elements in relative position and water elements in absolute position from below
.glass {
position: relative;
}
.water {
position: absolute;
bottom: 0px;
}
And apply these classes to your elements like this:
<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>
There is also a bug in the click function,
if (x = "full"){
assigns a variable, you should use == for comparison. I'm guessing this is a demo typo
source to share
If you're wrong, you always set the state full
. Going to compare it works great.
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>
source to share