Add animation to alternating horizontal panes [duplicate]

Question

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>

Answer 1

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>