Zdarzenie kliknięcia przejścia CSS3

Question

Ruszam, aby zaimplementować zdarzenie click w przejściu css3 dla znacznika div. Chcę, żeby to było jak normalne kliknięcie. Nadal nie mogłem znaleźć sposobu na zrobienie tego. Proszę, niech ktoś mi w tym pomoże.

Answer 1

Masz dwie podstawowe opcje:

• użyć pseudo-klasę :active w CSS. Element zostanie przeniesiony do stanu :active po kliknięciu (zakładając kotwicę). Chociaż niekoniecznie jest to najlepszy zakład, jeśli potrzebujesz szerokiego zakresu przeglądarek (tj .: nieobsługiwanego przez starsze przeglądarki), jest to jedyna opcja dla implementacji czysto CSS.

• Użyj JavaScript. Za pomocą JavaScriptu możesz przełączyć klasę elementu na kliknięcie, co pozwoli ci zmienić wygląd elementu (włączając w to wszelkie przejścia, które na nim ustawiłeś). Coś jak:

  $('.selector').click(function(e){ 
      $(this).toggleClass('new-class'); 
      e.preventDefault(); 
  }); 
  

Jest jeszcze trzecia - bardzo hacky - opcja, która polega na wykorzystaniu wejścia formularz rodzeństwo (pole wyboru) i dziedziczy się to checked stan, ale to chyba nie to, czego szukasz .

Dla dobra potomności, oto jest ryba, która pokazuje, co mówię (od a previous Stack Overflow question): http://jsfiddle.net/nMNJE/

Answer 2

Zgodnie CSS3 przejścia:

div 
{ 
    transition-property: width; 
    transition-duration: 1s; 
    transition-timing-function: linear; 
    transition-delay: 2s; 
} 

transition-property: Określa nazwę właściwość CSS, do której stosowane jest przejście.

transition-duration: Definiuje czas potrzebny do przejścia. Domyślnie 0.

transition-timing-function: Opisuje, w jaki sposób zostanie obliczona prędkość podczas przejścia. Domyślna "łatwość".

transition-delay: Definiuje, kiedy rozpocznie się przejście. Domyślna 0.

jedno właściwości można wykorzystać wszystkie reszty: transition: skrótowym do ustawiania właściwości cztery właściwości przejścia do pojedynczego obiektu.

div 
{ 
    transition: width 1s linear 2s; 
} 

Albo jeśli chcesz używać zwykłego css pseudoklas:

Biorąc pod uwagę to HTML:

<button>Click me!</button> 

Użyj tych pseudo-klasy:

button { } 
button:hover { background-color: lime; } 
button:active { background-color: fuchsia; } 
button:focus { background-color: yellow; } 

:hover jest po zakończeniu myszy element.

:active jest po kliknięciu elementu (i przytrzymaniu).

:focus to zakładka do elementu.

Mam nadzieję, że pomoże!