Efeito de transi��o CSS

08/01/2017

Ol�, fiz um exemplo simples com javascript e css; quando clico na primeira div (#ativa-menu) , a segunda div (#menu) aparece.

gostaria de adicionar efeitos css na segunda div quando a mesma aparece, por ex.: ela vir de cima para baixo. Por�m, com o javascript no meio n�o estou conseguindo adicionar efeitos de transi��o com css.

queria saber como posso adicionar efeitos no exemplo abaixo.

Nairan Omura.

<style>
	#ativa-menu {
		border: 1px solid red;
		width: 150px;
		height: 50px;
		margin-left:30%;
	}
	#menu {
		border: 1px solid blue;
		width: 20%;
		height: 50px;
		position:absolute;
		top:50%;
		left:30%;
		background:blue;
		color:white;
		display:none;
	}
	
	#ativa-menu:hover #menu {
		border: black 1px solid;
	}
</style>
<script>
	function mostramenu(){
		
		var ativa = document.getElementById("menu").style.display;
		
		if (ativa=="none"){
			document.getElementById("menu").style.display="inline";
		}else {
			document.getElementById("menu").style.display="none";
		}
	}
</script>
<body>
	<div id=ativa-menu onclick=mostramenu()>ativa</div>
	
	<div id=menu>hello!</div>
</body>

Nairan

Curtir t�pico + 0

Responder

Posts

11/01/2017

Victor Machado

Ol� Nairan, beleza?

O que voc� pode fazer � deixar o menu fora da tela como o padr�o, e adicionar a propriedade "transition: top 1s".

#menu {
border: 1px solid blue;
width: 20%;
height: 50px;
position:absolute;
top:0;
left:30%;
background:blue;
color:white;
display:none;

transition: top 1s;
}

E quando for ativar o menu, colocar alguma classe nele que modifique o top dele para 50%;

#menu.active {
top:50%;
}

Assim quando ele for ativo o transition vai fazer com que ele deslize at� a posi��o dele na tela.

Responder

Gostei + 0