Tengo un fragmento de trabajo para dos paneles horizontales que se alternan al hacer clic en el divisor. Necesito agregar una animación simple al divisor para que se mueva de un lado a otro en medio segundo. ¿Cómo puedo conseguir esto?
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>Puedes agregar transition css
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>