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>
<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!