Sin usar JavaScript, está limitado a usar transiciones CSS, cuando estén disponibles. Y aunque estos son bastante impresionantes, no son particularmente buenos, hasta donde he encontrado, para la animación condicional; básicamente pueden animar desde un punto de partida a otro punto y luego volver (en función de los eventos nativos del navegador disponibles en el navegador), con JS puede agregar/eliminar clases adicionales y hacer que los elementos div se muevan al contenido de su corazón, pero no con CSS 'solo' (aunque me gustaría que se demuestre lo contrario).
El mejor que he podido llegar a, hasta ahora, es:
#left {
float:left;
width:200px;
}
.right {
height: 0;
background-color: #fff;
margin-left: 205px;
overflow: hidden;
-webkit-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-moz-transition: all 1s linear;
transition: all 1s linear;
}
.right:target {
display: block;
height: 5em;
background-color: #ffa;
-webkit-transition: all 1s linear;
-ms-transition: all 1s linear;
-o-transition: all 1s linear;
-moz-transition: all 1s linear;
transition: all 1s linear;
}
JS Fiddle demo.
Y esto no se desliza lateralmente (aunque puede hacerlo si lo desea) porque no se veía bien, dado el nuevo reflujo de contenido que estaba sucediendo a medida que cambiaba el ancho del elemento.
Editado porque creo que pude haber malinterpretado una parte de la pregunta original:
... Me gustaría sin javascript
Siendo ese el caso , y el comentario (a continuación) parece sugerir que jQuery es una opción aceptable, esto podría valer la pena como demostración:
$('#left a').click(
function(){
var div = $('div').not('#left').eq($(this).index('#left a'));
var others = $('div[data-visible="true"]');
others.each(
function(){
$(this).animate({
'left' : '2000px'
},1000,function(){
$(this).removeAttr('style data-visible');
});
});
if (div.attr('data-visible')) {
div.animate({
'left' : '2000px'
},1000,function(){
$(this).removeAttr('style data-visible');
});
}
else {
div.animate({
'left' : '210px'
},1000).attr('data-visible',true);
}
});
JS Fiddle demo.
Referencias:
El primer violín es perfecto. Me aseguraré de crear mi CSS antes de agregar el script como sugirió. Esto me hizo la vida mucho más fácil, ¡muchas gracias! : D –
Piense en lo que quiere hacer y coloque sus elementos en CSS de forma correspondiente para que estén en la posición más óptima para comenzar tan pronto como sea necesario. – sg3s
Aquí hay un violín con lo que hasta ahora he aprendido: http://jsfiddle.net/bridget_kilgallon/sMDyB/4/ el violín funciona bien pero las transiciones no funcionan en dreamweaver ... ¿Alguna idea? Gracias de nuevo -BK –