Como faço para dar um "slide left" numa div?

[Henrique F. Santos 0]

<tr>			
	<td>
		<div style="cursor:pointer;">
			<div class="botao" onclick="selc1('cont1')">Tubos Redondos</div><br/>
			<div class="botao" onclick="selc1('cont2')">Tubos Quadrados</div><br/>
			<div class="botao" onclick="selc1('cont3')">Tubos Retangulares</div><br/>
		</div>
	</td>
	<td style="padding-left: 20px;">
		<div id="cont1" class="container-wrap">
			<p>Diâmetro: <input type="text" name="dm" id="dm" placeholder="milimetros"/></p>
			<p>Espessura da Parede: <input type="text" name="ep" id="ep" placeholder="milimetros"/></p>
			Kg/metro: <input type="text" name="mens" id="mens" disabled>
			<input id="btnred" type="button" onclick="red();" value="calcular">
		</div>
		<div id="cont2" style="display:none;" >
			<p>Lado: <input type="text" name="ld" id="ld" placeholder="milimetros"/></p>
			<p>Espessura da Parede: <input type="text" name="ep2" id="ep2" placeholder="milimetros"/></p>
			Kg/metro: <input type="text" name="mens2" id="mens2" disabled>
			<input type="button" onclick="qua();" value="calcular">
		</div>
		<div id="cont3" style="display:none;">
        	<p>Lado 1: <input type="text" name="ld1" id="ld1" placeholder="milimetros"/></p>
			<p>Lado 2: <input type="text" name="ld2" id="ld2" placeholder="milimetros"/></p>
			<p>Espessura da Parede: <input type="text" name="ep3" id="ep3" placeholder="milimetros"/></p>
			Kg/metro: <input type="text" name="mens3" id="mens3" disabled>
			<input type="button" onclick="ret();" value="calcular">
		</div>
	</td>
</tr>

Esse é o HTML

 

function selc1(el) {
	document.getElementById('cont1').style.display = 'none';
	document.getElementById('cont2').style.display = 'none';
	document.getElementById('cont3').style.display = 'none';
	document.getElementById(el).style.display = 'block';
}

E esse o JavaScript 

 

 

 

Preciso que na hora que eu clicar no botão la em cima ele apareça a DIV (como já está funcionando), e para essa DIV aparecer com um "slide left" ou algo parecido.

agradeço sugestões para melhorar esse código também.

Obrigado!

[Klawztro 3]

Boa tarde Henrique, novamente neste Fórum, gostaria de indicar a jQuery UI que tem entre outras coisas, efeitos para exibir/esconder elementos. Você pode ver exemplos do funcionamento aqui: https://jqueryui.com/show/ veja o efeito Slide, que eu acho que é o que você está procurando. Em javascript puro, imagino que daria muito trabalho... Teria que fazer algo como um clipping com css e depois uma função dentro de um setInterval para fazer o efeito dela deslizar, ou talvez uma função setInterval que vá aumentando o tamanho da div, algo que com o jQuery UI facilitaria muito:

 

/** Não cheguei a testar.
*/
function selc1(el) {
	$("#cont1").hide();
	$("#cont2").hide();
	$("#cont3").hide();
	$(el).show("slide");
}

 

[snowstormdelivery 19]

Também podes usar um keyframe CSS, acionado por javascript:

 

 

Link úteis

• MDN;
• Tableless.