Tema: Usar transiciones CSS3 para simplificar código Javascript
Ver Mensaje Individual
  #1 (permalink)  
Antiguo 04/12/2013, 13:28
Pantaláimon
 
Fecha de Ingreso: julio-2006
Ubicación: Barcelona
Mensajes: 244
Antigüedad: 17 años, 10 meses
Puntos: 32
Usar transiciones CSS3 para simplificar código Javascript
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
  1. <p><span>blablabla</span><span>bleble</span></p>
Y cuando le doy a un botón se convierte en:
Código HTML: 
Ver original
  1. <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
  1. <!DOCTYPE html>
  2. <html lang='es'>
  3.   <head>
  4.     <meta charset='UTF-8' />
  5.     <script type='text/javascript' src='js/insert_text.js'></script>
  6.     <title>Insertando texto</title>
  7.   </head>
  8.   <body>
  9.     <header>
  10.       <h1>Insertando texto</h1>
  11.     </header>
  12.     <section id='option_1'>
  13.       <div>
  14.         <button id='button_1'>insertar</button>
  15.       </div>
  16.       <p><span>blablabla</span><span>bleble</span></p>
  17.     </section>
  18.   </body>
  19. </html>

Y el código Javascript:
Código Javascript: 
Ver original
  1. // crear elemento del tirón
  2. Document.prototype.create = function( tag, text ) {
  3.     var elem = document.createElement( tag );
  4.     if( typeof text == 'string' ) {
  5.         elem.appendChild( document.createTextNode( text ) );
  6.     } else if( text instanceof Node ) {
  7.         elem.appendChild( text );
  8.     } else {
  9.         elem = null;
  10.     }
  11.     return elem;
  12. }
  13.  
  14. // inserta node como el hijo pos-esimo
  15. Node.prototype.insert = function ( node, pos ) {
  16.     var nodes = this.childNodes;
  17.     var n = nodes.length;
  18.     if( pos < n ) {
  19.         this.insertBefore( node, nodes[pos] );
  20.     } else if( pos == n ) {
  21.         this.appendChild( node );
  22.     } else {
  23.         return null;
  24.     }
  25.     return node;
  26. }
  27.  
  28. window.onload = function() {
  29.  
  30.     document.getElementById( 'button_1' ).onclick = function() {
  31.         // crear elemento span invisible
  32.         var span = document.create( 'span', 'hola' );
  33.         span.style.fontSize = '0px';
  34.         span.style.opacity = '0.0';
  35.         span.style.color = 'red';
  36.         // efecto transition para qu al cambiar alguna propiedad lo haga gradualmente
  37.         span.style.setProperty('transition', 'all 2s linear');
  38.         span.style.setProperty('-webkit-transition', 'all 2s linear');
  39.  
  40.         // insertar elemento como segundo hijo de p
  41.         var section = this.parentNode.parentNode;
  42.         elem = section.getElementsByTagName('p')[0];
  43.         var inserted = elem.insert( span, 1 );
  44.  
  45.         // hacer visible el nodo
  46.         if( inserted ) {
  47.             inserted.style.fontSize = '20px';
  48.             inserted.style.opacity = '1.0';
  49.         }
  50.  
  51.     }
  52. }

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!