Przejścia CSS3: czy istnieje opcja kliknięcia bez używania JQuery?

Question

Działa to doskonale:

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

Ale czy ktoś zna sposób, aby to zrobić za pomocą kliknięcia zamiast aktywowaniu? I nie z udziałem JQuery?

Dzięki!

Answer 1

można napisać tak:

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> 

Sprawdź to http://jsfiddle.net/nMNJE/

Answer 2

Masz dwie opcje, jedną za pomocą javascript i jedną przy użyciu pseudo-klasy CSS "active". Metoda javascript będzie obsługiwana w starszych przeglądarkach i jest polecana. Jednak, aby użyć metody CSS, po prostu zmień div: hover na 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

nie ma selektor css za kliknięcia bez użycia Sass, więc przy użyciu jQuery jest prawdopodobnie najlepszym

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

((nie zapomnij podać link wtyczki w nagłówku !!))

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

Answer 4

W rzeczywistości istnieje selektor kliknięć bez użycia javasccript. Możesz wpływać na różne elementy DOM przy użyciu pseudo klasy : target. Jeśli element jest celem celu zakotwiczenia, otrzyma on pseudoelement : target (w celu wpłynięcia na kliknięty element wystarczy ustawić identyfikator taki sam jak jego znacznik zakotwiczenia).

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

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

Oto skrzypce grać z: https://jsfiddle.net/k86b81jv/