Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Lucas Röhers

Suavização na transição

Por , em Desenvolvimento frontend

Recommended Posts

Lucas Röhers    0

Lucas Röhers
Postado

Olá, tenho o seguinte código:

<style type="text/css">
#ntf
	{
		font-size:14px;
		font-weight:bold;color:#5497ae;
		border:1px solid #5497ae;text-shadow:0px 1px 0px #fef4c5;
		-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.5), inset 0px 1px 0px rgba(255,255,255,0.25);-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.5), inset 0px 1px 0px rgba(255,255,255,0.25);
		box-shadow:0px 1px 2px rgba(0,0,0,0.5), inset 0px 1px 0px rgba(255,255,255,0.25);
		-webkit-border-radius:4px;-khtml-border-radius:5px;
		-moz-border-radius:5px;border-radius:5px;
		background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#e9f6fd),color-stop(100%,#d3eefb));
		
	}
	#boxtitulo{
		text-align: left;
		margin-left: 10px;

	}
	#boxtexto{
		text-align: left;
		margin-left: 10px;

	}
	#fecharbox{
		background: #000;
		color: #fff;
		line-height: 20px;
		position: absolute;
		right: 10px;
		text-align: center;
		top: 20px;
		width: 24px;
		text-decoration: none;
		font-weight: bold;
		-webkit-border-radius: 10px;
		-moz-border-radius: 10px;
		border-radius: 10px;
		-moz-box-shadow: 1px 1px 3px #000;
		-webkit-box-shadow: 1px 1px 3px #000;
		box-shadow: 1px 1px 3px #000;
		}
	#fecharbox:hover { 
		background: #0a87c5; 
	}
		
</style>

<div id="ntf"><a id="fecharbox" href="#" title="Fechar" onclick="document.getElementById('ntf').style.display='none';"> X </a>
<p id="boxtitulo">Titulo</p>
<p id="boxtexto">Texto</p>
		
 <br>
</div>

É uma notificação que ao clicar no X ela fecha, funciona tudo.

Só que eu quero acrescentar uma transição suave, fazendo a Div fecha suavemente. Porém eu quero esta transação seja por CSS, pois por jquery e java ele dá conflito com outros elementos do Web Site.

Então, qual código e onde adicionar para ter este efeito ? Sei que com CSS 3 é possível!

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Jourdan    3

Thiago Jourdan
Postado

Olá.

 

Cara, seguinte... não sei o que tá acontecendo nesse código que não está pegando: testei o CSS e é natural que ele não funcione, pois o CSS não disponibiliza "transition" para "display". Tentei com jQuery e ele conclui, digamos uns 5% do solicitado. Eu usei um slideUp em jQuery pra poder visualizar a transição, depois é só trocar por fadeOut, mas como falei, ela começa e fecha antes de terminar, mas já é um começo. Dá uma olhada ai no código:

<head>
<style type="text/css">
#ntf{
font-size:14px;
width:100%;
height:200px;
font-weight:bold;
color:#5497ae;
border:1px solid #5497ae;
text-shadow:0px 1px 0px #fef4c5;
-moz-box-shadow:0px 1px 2px rgba(0,0,0,0.5), inset 0px 1px 0px rgba(255,255,255,0.25);
-webkit-box-shadow:0px 1px 2px rgba(0,0,0,0.5), inset 0px 1px 0px rgba(255,255,255,0.25);
box-shadow:0px 1px 2px rgba(0,0,0,0.5), inset 0px 1px 0px rgba(255,255,255,0.25);
-webkit-border-radius:4px;
-khtml-border-radius:5px;
-moz-border-radius:5px;
border-radius:5px;
background:-webkit-gradient(linear,left top,left bottom,color-stop(0%,#e9f6fd),color-stop(100%,#d3eefb));
transition:0.5s;
}
#boxtitulo{
text-align:left;
margin-left:10px;
transition:0.5s;
}
#boxtexto{
text-align:left;
margin-left:10px;
transition:0.5s;
}
#fecharbox{
background:#000;
color:#fff;
line-height:20px;
position:absolute;
right:10px;
text-align:center;
top:20px;
width:24px;
text-decoration:none;
font-weight:bold;
border-radius:10px;
-moz-box-shadow:1px 1px 3px #000;
-webkit-box-shadow:1px 1px 3px #000;
box-shadow:1px 1px 3px #000;
transition:0.5s;
}
#fecharbox:hover{ 
background:#0a87c5;
transition:0.5s;
}
</style>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js" ></script>
<script>
function fechar(){
$('#ntf').slideUp(500);
$('#fecharbox').slideUp(500);
$('#boxtitulo').slideUp(500);
$('#boxtexto').slideUp(500);
}
</script>
</head>
<body>
<div id="ntf">
    <a id="fecharbox" href="#" title="Fechar" onclick="fechar()"> X </a>
    <p id="boxtitulo">Titulo</p>
    <p id="boxtexto">Texto</p><br>
</div>
</body>
Qualquer coisa, pode chamar aqui. ^^

Thiago Jourdan.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Lucas Röhers    0

Lucas Röhers
Postado

Rapaz, como falei, jquery e java não pode pois dá conflito com o Site.

 

Eu consigo fazer uma janela modal com html e css3 ter a display transition suave, porém o metodo de fechar a div não está funcionando, talvez por um deslize de código ou algo parecido.. Estou em busca ainda do código correto em css3 que funciona nesta ocasião.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Thiago Jourdan    3

Thiago Jourdan
Postado

É porque ainda não sabia como fazer o que você tinha pedido. :P

 

Mas parei agora e descobri:

 

/*--- Código CSS ---*/

#ntf{
   /*--- Adicione a "transition" na descrição da ntf para dar o delay (no caso, usei 0.5 segundos) ---*/
   transition:0.5s;
}

Agora no código HTML:

 

<!-- Estava assim -->

<a id="fecharbox" href="#" title="Fechar" onclick="document.getElementById('ntf').style.display='none';">X</a>

<!-- A propriedade "Display" não aceita transition, por isso usei a propriedade "opacity", setando 0, mas ela ainda é clicável, e ocupa o mesmo espaço, só está invisível -->

<a id="fecharbox" href="#" title="Fechar" onclick="document.getElementById('ntf').style.opacity=0;">X</a>

 

Para deixar esta propriedade exatamente como você quer, deve colocar uma condição para quando a opacidade atingir 0, setar "display:none;" no css.

 

O problema é que tanto o comando em si quanto essa condição, seriam bem melhor produzidos no Java ou jQuery. Não tenho muito conhecimento em PHP, mas acho que deva ter alguma condição que sete propriedades no CSS.

 

Qualquer coisa, pode retornar. ;)

Thiago Jourdan.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Desenvolvimento frontend
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito