Más arriba dije
Cita: Las animaciones de CSS no combinan con eventos para que se dispare una función (como pasa por ejemplo con la marquesina, que provee un modo de saber cuando se llega a un borde).
Me la paso criticando a los que vienen a poner burradas, porque después soy uno de los que tiene que andar corrigiendo sus temas en los mensajes posteriores.
Pero las mías (salvo muy honrosas excepciones) no las corrige nadie.
Estaban esperando que volviera, ¿no?.
Aproveché mis vacaciones del Foro para hacer esa versión JS del efecto que busca(ba)
patilanz; porque otra cosa que dije es que se podía hacer en javascript.
Por lo general estos inventos están llenos de variables y de contadores de tiempo, y parecen más complejos de lo que son; así que para que se haga amigable al destriparlo me basé en el ejemplo de
emprear, que seguramente ya fue estudiado. (Supongo, mi estimado, que no me va a hacer reclamos por eso, al fin y al cabo, posteamos bajo la premisa del CC.)
Para hacerlo aún más sencillo, usé una animación del tipo
linear; no porque no se pueda hacer una curva bezier para "amortiguar" el inicio y/o el fin de la transición, sino más que nada para no llenar el ejemplo de código innecesario.
De lo que no me salvé es del código de compatibilidad (supongo que anda desde IE6 y los principales navegadores para Windows).
Un caso especial es el
border-radius. Hacerlo funcionar en versiones viejas de Internet Explorer ya era un abuso que hubiese llenado de líneas un ejemplo que era para otra cosa; y sin embargo tuve que meter un hack para Opera.
¡ME ...
DRITE EN EL OJO DE ODÍN! ¡¿Cómo puede ser que hagan un tremendo navegador y se les pase el detalle de que no reconoce valores de porcentaje en las esquinas redondas?!
En fin, la próxima versión seguro lo arreglan(*), pero mientras tanto dejo un "truco" para zafar más o menos dignamente.
Aquí va el ejemplo
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Documento sin título
</title>
<style type="text/css">
/*<![CDATA[*/
#mostrar {
visibility: hidden; /*POR BUG IE6*/
position: absolute;
left: 480px;
top: 146px;
width: 210px;
height: auto;
background-color: #0CF;
padding: 10px;
border-radius: 10px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(opacity=0)";
opacity: 0;
}
.zoomin {
width: 20px;
height: 20px;
border: thin;
border-width: 1px;
border-radius: 5%;
cursor: -moz-zoom-in;
cursor: -webkit-zoom-in;
}
.zoomout {
border: thin;
border-width: 1px;
cursor: pointer;
cursor: -moz-zoom-out;
cursor: -webkit-zoom-out;
border-radius: 25px; /*HACK PARA OPERA*/
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var tamanoW = 20;
var tamanoH = 20;
var alfa = 0;
var tiempo = 25;
var factorW = 456 / tiempo;
var factorH = 473 / tiempo;
var frena;
function agrandar(){
if (tamanoW < 456){
tamanoW += factorW;
tamanoH += factorH;
document.getElementById('imagen').style.width = tamanoW +'px';
document.getElementById('imagen').style.height = tamanoH +'px';
frena = setTimeout(agrandar, tiempo);
}
else {
clearTimeout(frena);
document.getElementById('imagen').className = 'zoomout';
tamanoW = 456;
tamanoH = 473;
document.getElementById('imagen').style.width = '456px';
document.getElementById('imagen').style.height = '473px';
document.getElementById('mostrar').style.visibility = 'visible'; /*POR BUG IE6*/
frena = setTimeout(mostrar, 1);
}
}
function volver() {
if (tamanoW > 20){
alfa -= 0.1;
tamanoW -= factorW
tamanoH -= factorH
document.getElementById('imagen').style.width = tamanoW +'px';
document.getElementById('imagen').style.height = tamanoH +'px';
document.getElementById('mostrar').style.opacity = alfa;
document.getElementById('mostrar').style.filter =
'progid:DXImageTransform.Microsoft.Alpha(opacity=' +parseInt(alfa*100)+ ')'
frena = setTimeout(volver, tiempo);
}
else {
clearTimeout(frena);
tamanoW = 20;
tamanoH = 20;
alfa = 0;
document.getElementById('imagen').className = 'zoomin';
document.getElementById('imagen').style.width = '20px';
document.getElementById('imagen').style.height = '20px';
document.getElementById('mostrar').style.opacity = '0';
document.getElementById('mostrar').style.filter =
'progid:DXImageTransform.Microsoft.Alpha(opacity=0)'
}
}
function mostrar() {
if (alfa < 1){
alfa += 0.01;
document.getElementById('mostrar').style.opacity = alfa;
document.getElementById('mostrar').style.filter =
'progid:DXImageTransform.Microsoft.Alpha(opacity=' +parseInt(alfa*100)+ ')'
frena = setTimeout(mostrar, 25);
}
else {
clearTimeout(frena);
alfa = 1;
document.getElementById('mostrar').style.opacity = '1';
document.getElementById('mostrar').style.filter.Alpha = '(opacity=100)';
}
}
//]]>
</script>
</head>
<body>
<img class="zoomin" src="http://javascriptcsspr.comli.com/css/images2/combate_gatuno.jpg" id="imagen" onmouseover="agrandar()" onclick="volver();" alt="Gatos" /> <div
id="mostrar">Pulse en la imagen para volver a su estado anterior.</div>
</body>
</html>
Bien. Después de terminarlo me quedé pensando en eso que cité al comienzo del post. Y teniendo en cuenta que todas estas animaciones en CSS están hechas con JS, me pareció poco coherente que en verdad no existiera un "evento" para saber cuándo empieza y/o termina una transición.
Y resulta que existe, pero como aún no es estándar, cada navegador lo pone como se le viene en gana, por eso no hay uno compatible y que se pueda usar como atributo en el HTML.
Aquí va el otro ejemplo.
Código:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
Documento sin título
</title>
<style type="text/css">
/*<![CDATA[*/
#imag {
width: 20px;
height: 20px;
border: thin;
border-width: 1px;
border-radius: 0;
-webkit-transition: border-radius 1.1s linear, height 1.1s linear, width 1.1s linear;
-moz-transition: border-radius 1.1s linear, height 1.1s linear, width 1.1s linear;
-o-transition: border-radius 1.1s linear, height 1.1s linear, width 1.1s linear;
}
#imag:hover {
border-radius: 20px;
width: 456px;
height: 473px;
}
#aviso {
position: absolute;
left: 480px;
top: 146px;
width: 210px;
height: auto;
background-color: #0CF;
padding: 10px;
border-radius: 10px;
}
.transparente {
-webkit-transition: opacity .5s linear;
-moz-transition: opacity .5s linear;
-o-transition: opacity .5s linear;
opacity: 0;
}
.opaco {
-webkit-transition: opacity 1s linear;
-moz-transition: opacity 1s linear;
-o-transition: opacity 1s linear;
opacity: 1;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
var texto;
/* ESTA FUNCIÓN SÓLO CARGA LA VARIABLE texto CON EL OBJETO DE id=aviso
Y MONITOREA EL EVENTO "FIN DE TRANSICIÓN" EN OBJETO CON id=imag .
CUANDO EL EVENTO SE DISPARA, EJECUTA FUNCIÓN mostrar1() .*/
function mostrar0() {
texto = document.getElementById("aviso");
var gatos = document.getElementById("imag");
gatos.addEventListener("transitionend", mostrar1, true); // FF
gatos.addEventListener("webkitTransitionEnd", mostrar1, true); // Saf Chr
gatos.addEventListener("OTransitionEnd", mostrar1, true); // Op
/* AnimationEvent (para keyframes) y TransitionEvent son experimentales para IE10 */
}
/* ESTA FUNCIÓN ES PARA CAMBIAR LA CLASE EN OBJETO DE id=aviso .
LA ANIMACIÓN ESTÁ EN EL CSS DE CADA UNA DE LAS DOS LAS CLASES. */
function mostrar1() {
if(texto.className == "transparente") setTimeout('texto.className = "opaco"', 20);
else setTimeout('texto.className = "transparente"', 20);
}
onload = mostrar0;
//]]>
</script>
</head>
<body>
<img id=imag src="http://javascriptcsspr.comli.com/css/images2/combate_gatuno.jpg" alt="Gatos" />
<div id=aviso class=transparente >Salga de la imagen para volver a su estado anterior.</div>
</body>
</html>
Usé nada más que
:hover, porque es para probar que funcionan, y que al llegar los gatos al tamaño máximo o mínimo de su animación CSS, se dispara una función que solamente cambia una clase en el cartelito. Porque la transición del fade también es CSS.
Redondeando: como me niego a sonarle los mocos a los demás, supongo que nadie viene a limpiar los míos.
Así que vengo yo solito, y me hago la corrección.
ayuda con marquee como detectar que el scroll del navegador está en el top (o casi en el top) (algo más sobre animaciones)
Marquesina en todos los navegadores (algo más sobre marquee, como para que se note que 'todo' se puede adaptar, o simular con JS)
(*) En la versión 12.02 ya está arreglado.