[SOLUCIONADO] Usar transiciones CSS3 para simplificar código Javascript

Pantaláimon · #1 (**permalink**) 04/12/2013, 13:28

Buenas.

Estoy intentando aprovechar las transiciones de CSS3 para simplificar un efecto de cambio gradual con javascript. La idea es sencilla. Tengo un texto:

Código HTML:

Ver original<p><span>blablabla</span><span>bleble</span></p>

Y cuando le doy a un botón se convierte en:

Código HTML:

Ver original<p><span>blablabla</span><span>hola</span><span>bleble</span></p>

Pero la idea es que esta inserción sea gradual. Esto se me ha ocurrido hacerlo iniciando la opacidad y tamaño de la fuente del elemento insertado a 0 y luego cambiarla con una transición. Sin embargo, algo debo hacer mal.

Muestro el código HTML:

Código HTML:

Ver original<!DOCTYPE html>
<html lang='es'>
  <head>
    <meta charset='UTF-8' />
    <script type='text/javascript' src='js/insert_text.js'></script>
    <title>Insertando texto</title>
  </head>
  <body>
    <header>
      <h1>Insertando texto</h1>
    </header>
    <section id='option_1'>
      <div>
        <button id='button_1'>insertar</button>
      </div>
      <p><span>blablabla</span><span>bleble</span></p>
    </section>
  </body>
</html>

Y el código Javascript:

Código Javascript:

Ver original// crear elemento del tirón
Document.prototype.create = function( tag, text ) {
    var elem = document.createElement( tag );
    if( typeof text == 'string' ) {
        elem.appendChild( document.createTextNode( text ) );
    } else if( text instanceof Node ) {
        elem.appendChild( text );
    } else {
        elem = null;
    }
    return elem;
}
 
// inserta node como el hijo pos-esimo
Node.prototype.insert = function ( node, pos ) {
    var nodes = this.childNodes;
    var n = nodes.length;
    if( pos < n ) {
        this.insertBefore( node, nodes[pos] );
    } else if( pos == n ) {
        this.appendChild( node );
    } else {
        return null;
    }
    return node;
}
 
window.onload = function() {
 
    document.getElementById( 'button_1' ).onclick = function() {
        // crear elemento span invisible
        var span = document.create( 'span', 'hola' );
        span.style.fontSize = '0px';
        span.style.opacity = '0.0';
        span.style.color = 'red';
        // efecto transition para qu al cambiar alguna propiedad lo haga gradualmente
        span.style.setProperty('transition', 'all 2s linear');
        span.style.setProperty('-webkit-transition', 'all 2s linear');
 
        // insertar elemento como segundo hijo de p
        var section = this.parentNode.parentNode;
        elem = section.getElementsByTagName('p')[0];
        var inserted = elem.insert( span, 1 );
 
        // hacer visible el nodo
        if( inserted ) {
            inserted.style.fontSize = '20px';
            inserted.style.opacity = '1.0';
        }
 
    }
}

A parte de preguntarme donde esta el error, ¿creéis que es buena la idea de aprovecharme de las nuevas propiedades CSS para conseguir el efecto?

Un saludo y gracias!

PHPeros · #2 (**permalink**) 04/12/2013, 13:38

document.prototype con minúscula

marlanga · #3 (**permalink**) 04/12/2013, 13:49

Sí y no. Lo que quieres hacer no se hace editando estilos con javascript. Metes los estilos esos en una clase CSS, y con javascript le pones o le quitas la clase al elemento que quieras.

Pantaláimon · #4 (**permalink**) 04/12/2013, 13:59

Cita:

Iniciado por PHPeros

document.prototype con minúscula

Tengo entendido que no. Una cosa es la [URL="http://krook.org/jsdom/Document.html"]clase Document[/URL] y la otra la instancia.

Cita:

Iniciado por marlanga

Sí y no. Lo que quieres hacer no se hace editando estilos con javascript. Metes los estilos esos en una clase CSS, y con javascript le pones o le quitas la clase al elemento que quieras.

Me parece muy elegante lo que propones voy a intentarlo, a ver que ocurre.

Un saludo!

Pantaláimon · #5 (**permalink**) 04/12/2013, 14:26

He creado este fichero CSS:

Código CSS:

Ver original/* css/test.css */
.transition {
  -webkit-transition: all 2s linear;
     -moz-transition: all 2s linear;
      -ms-transition: all 2s linear;
       -o-transition: all 2s linear;
          transition: all 2s linear;
}
 
.minimized {
  font-size: 0px;
  opacity: 0.0;
}

y lo he insertado en el código HTML

Código HTML:

Ver original<!DOCTYPE html>
<html lang='es'>
  <head>
    <meta charset='UTF-8' />
    <link rel='stylesheet' type='text/css' href='css/test.css' />
    <script type='text/javascript' src='js/insert_text.js'></script>
    ...

He modificado el manejador de eventos simplicandose a esto:

Código Javascript:

Ver originalwindow.onload = function() {
 
    document.getElementById( 'button_1' ).onclick = function() {
        // crear elemento span invisible
        var span = document.create( 'span', 'hola' );
        span.className = 'transition minimized';
 
        // insertar elemento como segundo hijo de p
        var section = this.parentNode.parentNode;
        elem = section.getElementsByTagName('p')[0];
        var inserted = elem.insert( span, 1 );
 
        // hacer visible el nodo
        if( inserted ) {
            inserted.className = 'transition';
        }
    }
}

Pero sigue sin haber transición. El elemento se inserta correctamente pero de forma instantánea.

Edit, he probado con la propiedad classList y sus métodos add y remove pero sigo con el mismo problema:

Código Javascript:

Ver original// crear elemento span invisible
        var span = document.create( 'span', 'hola' );
        span.classList.add('transition');
        span.classList.add('minimized';
 
        // insertar elemento como segundo hijo de p
        var section = this.parentNode.parentNode;
        elem = section.getElementsByTagName('p')[0];
        var inserted = elem.insert( span, 1 );
 
        // hacer visible el nodo
        if( inserted ) {
            inserted.classList.remove('minimized');
        }

Un saludo!

marlanga · #6 (**permalink**) 04/12/2013, 15:21

http://jsfiddle.net/b99XN/1/

Para acceder al prototype, Document.prototype es con mayúscula.
Al parecer, si creas el elemento y le insertas clases con efectos transition, no hacen la transición y hacen los cambios de golpe.
Pero como soy un tío listísimo he usado un timeout para que meta la clase después de crearlo y he esquivado el bug (porque creo es un bug) que tiene el navegador. Por lo menos el chrome, soy demasiado gandul para abrir y probarlo con otros.

IsaBelM · #7 (**permalink**) 04/12/2013, 16:45

y por qué no en lugar de usar transition de css3, que no es crooss-browser, usas simplemente javascript??

Cita:

<!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></title>
<script type="text/javascript">
function transicion() {

var box = document.getElementById('tran');
var empieza = new Date().getTime();

(function opacidad(empieza, transOpacidad, tiempoFade) {

setTimeout(function() {

var ahora = new Date().getTime();

if (transOpacidad <= 100) {

if ((ahora - empieza) < tiempoFade) {

var avance = ((ahora - empieza) / tiempoFade);
var opac = transOpacidad + ((100 - transOpacidad) * avance);

box.style.opacity = parseFloat(opac/100).toFixed(2);
box.style.filter = 'alpha(opacity =' + opac + ')';
box.style.display = (opac > .01) ? 'inline' : 'none';
opacidad(empieza, transOpacidad, tiempoFade);

} else {

box.style.opacity = 1;
box.style.filter = 'alpha(opacity ="100")';
}
}

}, 1);

})(empieza, 0, 3000);

}

</script>
</head>
<body>
<span onclick="transicion();">Mostrar</span>
<div id="tran" style="width: 100px; background-color: #CCC; display: none"> un bloque que estaba oculto</div>
</body>
</html>

Pantaláimon · #8 (**permalink**) 04/12/2013, 18:37

Me ha sorprendido esta solución recursiva. Buena parte de los compiladores/intérpretes de lenguajes estan enfocados a ser más eficientes con soluciones iterativas antes que recursivas. Aunque hay algunos más enfocados a la programación funcional que convierten ciertos tipos de recursividad en iteración de forma bastante eficiente. ¿Es el caso de Javascript?

Me había enfocado a buscar una solución con transition por varias razones. Aún estoy empezando y el API de Javascript se me hace muy grande ahora al principio, por eso busco hacer cosas más sencillas y aprovechando lo que ya sé. Por otro lado, con CSS3 ya tendria la mayoría del trabajo hecho y bien separado. Por ejemplo, si ahora quiero cambiar la timing-function de linear a ease-out o ease-in, me seria muy fácil. De la otra manera debería reinventarme la función cubic-bezier() de nuevo. Por otra parte, y desde la poca experiencia que tengo ahora, prefiero intentar aprender un estándar antes que meterme en los terrenos del cross-browser. A la vez, es una manera de hacer presión y que los navegadores fuera del estándar se vayan poniendo las pilas.

Ya miraré a ver que averiguo en stackoverflow las razones del "bug" que de momento he comprobado que ocurre tanto en chrome como firefox y comento algo por aquí.

Un saludo y gracias.

Pantaláimon · #9 (**permalink**) 05/12/2013, 05:49

He encontrado información de por qué puede ocurrir ese comportamiento (parece que no es un bug):

Cita:

There is only one JavaScript thread per window. Other activities like rendering, downloading etc may be managed by separate threads, with different priorities.

(El resaltado es mío)

En esa web también habla del trick setTimeout( ..., 0 ) para la sincronización de algunas sentencias. Tendré que estudiarla en profundidad.

Un saludo!

IsaBelM · #10 (**permalink**) 05/12/2013, 07:30

puede que sea una solución el uso del temporizador. aquí lo uso, en la función copypasteRaton para invocar la función autoCompletaRaton y de este modo despliegue la capa

marlanga · #11 (**permalink**) 05/12/2013, 07:45

Yo no conocía ese problema, nunca me había topado con él; pero mi ego crece aún más sabiendo que he llegado sin ayuda a la misma solución que otros buenos programadores de javascript.
No podeis verme, pero ahora mismo me estoy dando besos en los hombros y brazos.

Pantaláimon · #12 (**permalink**) 06/12/2013, 05:16

Si os interesa, encontré esta entrada donde el usuario DVK da una explicación muy didáctica sobre setTimeout(... , 0 ). Doy el tema por solucionado.

Un saludo y gracias!