Transiciones CSS3: ¿hay una opción de clic al hacer clic sin usar JQuery?

Question

Esto funciona muy bien:

<style type="text/css"> 
    div 
    { 
    width:100px; 
    height:100px; 
    background:red; 
    transition:width 2s; 
    -moz-transition:width 2s; /* Firefox 4 */ 
    -webkit-transition:width 2s; /* Safari and Chrome */ 
    -o-transition:width 2s; /* Opera */ 
    } 

    div:hover 
    { 
    width:300px; 
    } 
    </style> 

Pero ¿alguien sabe de una manera de hacer esto utilizando clic en lugar de flotar? Y sin involucrar a JQuery?

Gracias!

Answer 1

Usted puede escribir así:

CSS

input{display:none} 
.ani 
    { 
    width:100px; 
    height:100px; 
    background:red; 
    transition:width 2s; 
    -moz-transition:width 2s; /* Firefox 4 */ 
    -webkit-transition:width 2s; /* Safari and Chrome */ 
    -o-transition:width 2s; /* Opera */ 
    display:block; 
    } 
input:checked + .ani{width:300px;} 

HTML

<input type="checkbox" id="button"> 
<label class="ani" for="button"></label> 

Compruebe esto http://jsfiddle.net/nMNJE/

Answer 2

Tiene dos opciones, una con javascript y otra con la pseudoclase CSS "activa". El método javascript será compatible con los navegadores más antiguos, y es lo que recomendaría. Sin embargo, para usar el método CSS simplemente cambie div: hover a div: active.

Javascript:

<script type="text/javascript"> 
function expand(){ 
    document.getElementById('id').style.width="300px"; 
} 
</script> 

CSS:

<style type="text/css"> 
div#id 
{ 
width:100px; 
height:100px; 
background:red; 
transition:width 2s; 
-moz-transition:width 2s; /* Firefox 4 */ 
-webkit-transition:width 2s; /* Safari and Chrome */ 
-o-transition:width 2s; /* Opera */ 
} 
</style> 

HTML:

<div id="id" onClick="expand()"> 
    Div Content... 
</div> 

Answer 3

no hay ningún selector CSS para clics sin necesidad de utilizar Sass, por lo que el uso de jQuery es probablemente su mejor apuesta

$(document).ready(function(){ 
$('#DIV_ID').click(function(){ 
$(this).animate({width:'300px'},200); 
}); 
}); 

((no se olvide de incluir el enlace plug-in en su cabecera !!))

<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script> 

Answer 4

En realidad, hay un selector de clics sin usar javasccript. Puede afectar diferentes elementos DOM utilizando : target pseudoclase. Si un elemento es el destino de un objetivo delimitador obtendrá el : pseudo elemento objetivo (para influir en el elemento cliqueado, simplemente configure el ID igual que su etiqueta de ancla).

<style> 
a { color:black; } 
a:target { color:red; } 
</style> 

<a id="elem" href="#elem">Click me</a> 

Aquí es un violín para jugar con: https://jsfiddle.net/k86b81jv/