I have a working snippet for two horizontal panes that alternate when clicking on the splitter. I need to add a simple animation to the splitter so that it moves from on side to another in half a second. How can I achieve this?
function changeThis()
{
var getF = document.getElementById("first");
var getS = document.getElementById("second");
if(getF.style.width == "0%") {
getF.style.width="100%";
getS.style.width="0%";
} else {
getF.style.width="0%";
getS.style.width="100%";
}
}.splitter {
width: 100%;
height: 100px;
display: flex;
}
#separator {
cursor: pointer;
background-color: #aaa;
background-repeat: no-repeat;
background-position: center;
width: 10px;
height: 100%;
/* Prevent the browser's built-in drag from interfering */
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#first {
background-color: #dde;
width: 100%;
height: 100%;
min-width: 10px;
}
#second {
background-color: #eee;
width: 0%;
height: 100%;
min-width: 10px;
}<div class="splitter">
<div id="first"></div>
<div id="separator" onclick="changeThis()"></div>
<div id="second" ></div>
</div>You can add css transition
function changeThis()
{
var getF = document.getElementById("first");
var getS = document.getElementById("second");
if(getF.style.width == "0%") {
getF.style.width="100%";
getS.style.width="0%";
} else {
getF.style.width="0%";
getS.style.width="100%";
}
}.splitter {
width: 100%;
height: 100px;
display: flex;
}
#separator {
cursor: pointer;
background-color: #aaa;
background-repeat: no-repeat;
background-position: center;
width: 10px;
height: 100%;
/* Prevent the browser's built-in drag from interfering */
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
#first {
background-color: #dde;
width: 100%;
height: 100%;
min-width: 10px;
/** add animation */
transition: .5s width linear;
}
#second {
background-color: #eee;
width: 0%;
height: 100%;
min-width: 10px;
/** add animation */
transition: .5s width linear;
}<div class="splitter">
<div id="first"></div>
<div id="separator" onclick="changeThis()"></div>
<div id="second" ></div>
</div>