CSS - Problema con transition

   
Vista:

Problema con transition

Publicado por nacho nachosoft71@hotmail.com (21 intervenciones) el 10/09/2014 18:22:32
Hola Buenas. Tengo el sigueinte codigo y es un menu acordeon.
La cuestion esque se habre muy rapido y quiero que lo haga mas despacio, con transition.
A ver quien puede echarme una mano.
Este es el codigo:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
<HTML LANG="Spanish">
 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 
<head>
 
</head>
<body>
 
 
<style>
#acordeon {
	width: 230px;
	margin:5px auto auto auto;
 
}
 
#acordeon .item {
	width: 230px;
	overflow: hidden;
 
	color: #000000;
	height:15px;
	font-size:11px;
	font-family: helvetica;
	cursor: pointer;
	margin-bottom: 3px;
	text-align: center;
	vertical-align: middle;
 
 
	}
 
#acordeon .polo a {
	text-decoration:none; font-family: helvetica;
	font-size: 10px;
	text-align: center;
	color:#ffffff;
 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */
 
	font-size:10px;
	cursor: pointer;
}
 
#acordeon .item a {
	text-decoration: none;
	border-radius: 10px;
	color:#000000;
	display: block;
	width:230px;
	height: 15px;
	vertical-align: middle;
	background: #99b6dd; /* Old browsers */
	background: -moz-linear-gradient(top,  #99b6dd 1%, #eff7fc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#99b6dd), color-stop(100%,#eff7fc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #99b6dd 1%,#eff7fc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #99b6dd 1%,#eff7fc 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #99b6dd 1%,#eff7fc 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #99b6dd 1%,#eff7fc 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99b6dd', endColorstr='#eff7fc',GradientType=0 ); /* IE6-9 */
	margin-bottom:5px;
 
 
}
 .clearing{
      clear:both;
 
   }
 
#acordeon .item:hover{
 
    height:100%;
}
 
</style>
 
<?php
$Categoria1 = str_replace("-", " ",$_GET['Categoria1']);
$Categoria2 = str_replace("-", " ",$_GET['Categoria2']);
 
function left($string, $count){
   return substr($string, 0, $count);
 }
 
echo "<div id='acordeon'><div id='acordeon'>";
$Lis=mysql_query("SELECT Categoria1,Categoria2 from articulos group by Categoria1,Categoria2");
 
 
while($pro = mysql_fetch_array($Lis)) {
	if ($ulti==$pro['Categoria1'])
		{
			$z=$z+1;
 
			echo "<p style='height:17px; margin:0;'><a onmouseover='javascript: esperar(1)' style='text-decoration: none; border-radius: 10px; color:#000000; display: block; width:220px; height: 15px;	vertical-align: middle; background: #c1e9f5;' href='http://opix.es/tienda/".$pro['Categoria1']."/".$pro['Categoria2']."'>".left($pro['Categoria2'],30)."</a></p>";
		}
	else
		<div></div>
			$pus = 15*$z;
			$x = $x+1;
 
			echo "</div><div id'clearing'></div><div id='".$pus."' class='item'><a onmouseover='javascript: esperar(1)' href='http://opix.es/tienda/".$pro['Categoria1']."'>".$pro['Categoria1']."</a>";
		}
	$ulti=$pro['Categoria1'];
}
 
 
?>
 
<script type="text/javascript">
 
function esperar(espera)
{
	setSeconds(2);
	setTimeout("",espera);
 
}
function ma()
{
	document.cookie="a=no";
 
}
 
</script>
</div>
<body>
</html>
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de txema

Problema con transition

Publicado por txema (9 intervenciones) el 11/09/2014 00:42:54
Para la documentación de transition en CSS3 puedes ver www.w3schools.com/css/css3_transitions.asp y www.w3schools.com/cssref/css3_pr_transition-timing-function.asp

En alguna ocasión lo he utilizado con éxito también en milisegundos (ms)
1
2
3
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Problema con transition

Publicado por nacho (21 intervenciones) el 11/09/2014 18:01:38
Lo que quiero es que espere un segundo o segundo y medio después de estar sobre el "<a"
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Problema con transition

Publicado por nacho (21 intervenciones) el 12/09/2014 18:37:46
Sabes es que de css no se nada y no entiendo lo del manual. si me pudieras decir lo que tengo que poner y donde te lo agradeciria mucho.

Atentamente. nacho
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Problema con transition

Publicado por nacho (21 intervenciones) el 12/09/2014 19:01:18
Solo copie el codigo y modifique pocas cosas. por eso no se donde se tiene que meter el transition.
He probado con varios tipos y los he puesto en todos los sitios y no me va. Por favor, me pueden ayudar.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Problema con transition

Publicado por nacho nachosoft71@hotmail.com (21 intervenciones) el 13/09/2014 17:06:42
Mira he probado con esto pero no me va

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<style>
#acordeon .item {
	width: 230px;
	overflow: hidden;
	color: #000000;
	height:15px;
	font-size:11px;
	font-family: helvetica;
	cursor: pointer;
	margin-bottom: 3px; height: 30px; /* height = total height of A child element */
    overflow: hidden;
    transition: height ease-in-out 500ms; /* css3 transition */
    -o-transition: height ease-in-out 500ms;
    -moz-transition: height ease-in-out 500ms;
    -webkit-transition: height ease-in-out 500ms;
    border: 1px solid #ccc;
    border-radius: 5px;
    -moz-border-radius: 5px;
    -webkit-border-radius: 5px;
    margin-bottom: 2px;text-align: center;
	vertical-align: middle;
 
	/*-----------------------------------*/
	/*  HE PROBADO CON ESTO PERO NO VA   */
	/*-----------------------------------*/
 
	transition: height ease 2000ms; /* css3 transition */
    -o-transition: height ease 2000ms;
    -moz-transition: height ease 2000ms;
    -webkit-transition: height ease 2000ms;
	}
 
 
#acordeon a {
	text-decoration: none;
	border-radius: 10px;
	color:#000000;
	display: block;
	width:230px;
	height: 15px;
	vertical-align: middle;
	background: #99b6dd; /* Old browsers */
	background: -moz-linear-gradient(top,  #99b6dd 1%, #eff7fc 100%); /* FF3.6+ */
	background: -webkit-gradient(linear, left top, left bottom, color-stop(1%,#99b6dd), color-stop(100%,#eff7fc)); /* Chrome,Safari4+ */
	background: -webkit-linear-gradient(top,  #99b6dd 1%,#eff7fc 100%); /* Chrome10+,Safari5.1+ */
	background: -o-linear-gradient(top,  #99b6dd 1%,#eff7fc 100%); /* Opera 11.10+ */
	background: -ms-linear-gradient(top,  #99b6dd 1%,#eff7fc 100%); /* IE10+ */
	background: linear-gradient(to bottom,  #99b6dd 1%,#eff7fc 100%); /* W3C */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#99b6dd', endColorstr='#eff7fc',GradientType=0 ); /* IE6-9 */
	margin-bottom:5px;
 
 
}
 .clearing{
      clear:both;
   }
 
  #acordeon p
  {
  	height: auto;
  }
#acordeon div:hover
{
    height:auto;
}
#acordeon div:hover a {
    border-bottom: 1px solid #ccc;
    font-weight: bold;
}
</style>
 
<?php
$Categoria1 = str_replace("-", " ",$_GET['Categoria1']);
$Categoria2 = str_replace("-", " ",$_GET['Categoria2']);
 
function left($string, $count){
   return substr($string, 0, $count);
 }
 
echo "<div id='acordeon'><div id='acordeon'>";
$Lis=mysql_query("SELECT Categoria1,Categoria2 from articulos group by Categoria1,Categoria2");
 
 
while($pro = mysql_fetch_array($Lis)) {
	if ($ulti==$pro['Categoria1'])
		{
			$z=$z+1;
 
			echo "<p style='height:17px; margin:0;'><a onmouseover='javascript: esperar(1)' style='text-decoration: none; border-radius: 10px; color:#000000; display: block; width:220px; height: 15px;	vertical-align: middle; background: #c1e9f5;' href='http://opix.es/tienda/".$pro['Categoria1']."/".$pro['Categoria2']."?vino=no'>".left($pro['Categoria2'],30)."</a></p>";
		}
	else
		{
			$pus = 15*$z;
			$x = $x+1;
 
			echo "</div><div id'clearing'></div><div id='".$pus."' class='item'><a onmouseover='javascript: esperar(1)' href='http://opix.es/tienda/".$pro['Categoria1']."vino=no'>".$pro['Categoria1']."</a>";
		}
	$ulti=$pro['Categoria1'];
}
?>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de elnawe

Problema con transition

Publicado por elnawe (1 intervención) el 13/09/2014 17:15:22
En CSS (la parte del estilo) a #acordeon agregale estas líneas:

-webkit-transition: all 2s 0.5s linear; /* Con webkit, todos los navegadores actuales */
-moz-transition: all 2s 0.5s linear; /* Moz es para Firefox pero para versiones viejas, ahora también usa Webkit */

Te explico lo que hace cada opción de este atributo.
all - El primero le dice ¿qué atributo va a ser animado? Si ponés "all"serán todos animados, en cambio, si ponés height solamente será animada la altura u opacity solamente la opacidad.

2s La segunda opción es el tiempo que le lleva a la animación de ir desde el inicio hacia el fin. En este caso 2 segundos, podés usar 1.5s, 1s o bien 500ms (milisegundo).

0.5s - El tercero indica el retraso para iniciar la animación. Si ponés 1s deberás esperar ese tiempo para que inicie.

linear - El cuarto y último es el modo en que hace la animación. Linear hace que a animación tenga la misma velocidad de inicio a fin. Ease-in hace que la animación arranque más rápido y se vaya desacelerando al final. Ease-in-out hace que se acelere al inicio, se desacelere y vuelva a acelerarse para terminar. Por último, ease-out hace que tome aceleración cuando está terminando la animación.

NdR: ¡Tiene que estar dentro de #acordeon!

Te quedaría así:
#acordeon
{
-webkit-transition: all 2s 0.5s linear; /* Con webkit, todos los navegadores actuales */
-moz-transition: all 2s 0.5s linear; /* Moz es para Firefox pero para versiones viejas, ahora también usa Webkit */
}

Edición:
Un consejo que me olvidé de darte. Si usas alturas automáticas o de porcentaje no te va a funcionar. Las animaciones se tienen que hacer con alturas fijas. A lo que me refiero es que height: auto o height: 100% no dejan participar a la animación de height, ya que es incalculable porque depende del tamaño de pantalla del navegador o del contenedor de donde está el acordeón.

No es lo mismo height: 100% en una pantalla de 768px de altura (donde height termina siendo algo así como 300px) a una pantalla donde la altura es menor, por ejemplo 480px (que termina llegando a los 120px probablemente). Las animaciones funcionan con datos fijos.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Problema con transition

Publicado por nacho (21 intervenciones) el 14/09/2014 16:44:41
Gracias, por fin lo he solucionado. Muchas gracias, de verdad.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar

Problema con transition

Publicado por nacho (21 intervenciones) el 14/09/2014 16:47:06
Pues bien, lo he puesto al 50% y parece que va decente, a mi con eso me vale, porque dentro de una categoria puede haber 0 categorias o 20 entoncen un alto fijo no me vale, pero he puesto al 50 % y no va mal. Gracias, por todo.

Por ciento estais invitados a ver la pagina que he abierto.

Opix.es

Gracais.

Atentamente.

Nacho
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar