Sự kiện nhấp chuyển tiếp CSS3

Question

Tôi di chuyển để triển khai sự kiện nhấp chuột trong quá trình chuyển đổi css3 cho thẻ div. Tôi muốn nó giống như một sự kiện bấm nút bình thường. Tôi vẫn không thể tìm ra cách để làm điều này. Xin vui lòng bất kỳ ai có thể giúp tôi về điều này.

Answer 1

Bạn có hai lựa chọn cơ bản:

• Sử dụng pseudo-class :active trong CSS của bạn. Sau đó, phần tử sẽ chuyển sang trạng thái :active khi được nhấp (giả sử một neo). Mặc dù đây không nhất thiết là đặt cược tốt nhất nếu bạn cần phủ sóng trình duyệt rộng (ví dụ: không được các trình duyệt cũ hỗ trợ), đây là tùy chọn duy nhất cho việc triển khai thuần CSS.

• Sử dụng JavaScript. Sử dụng JavaScript, bạn có thể chuyển đổi lớp của phần tử khi nhấp chuột, điều này sẽ cho phép bạn thay đổi giao diện của phần tử (bao gồm bất kỳ chuyển tiếp nào bạn đã đặt trên đó). Một cái gì đó như:

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

Có một thứ ba - tùy chọn trong đó bao gồm sử dụng một đầu vào dạng anh chị em ruột (một hộp kiểm) và kế thừa tắt nó checked nhà nước, nhưng nó có lẽ không phải những gì bạn đang tìm kiếm - rất hacky .

Vì hậu thế của, đây là một Fiddle đó chứng tỏ những gì tôi đang nói về (từ a previous Stack Overflow question): http://jsfiddle.net/nMNJE/

Answer 2

Theo CSS3 chuyển:

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

transition-property: Chỉ định tên của thuộc tính CSS mà quá trình chuyển đổi được áp dụng.

transition-duration: Xác định khoảng thời gian chuyển đổi. Mặc định 0.

transition-timing-function: Mô tả cách tính tốc độ trong quá trình chuyển đổi. Mặc định "dễ dàng".

transition-delay: Xác định thời điểm chuyển đổi sẽ bắt đầu. Mặc định 0.

Một tài sản hơn để sử dụng tất cả các phần còn lại: transition: Một tài sản viết tắt cho thiết bốn thuộc tính chuyển đổi thành một tài sản duy nhất.

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

Hoặc nếu bạn muốn sử dụng đồng bằng css pseudo-classes:

Với html này:

<button>Click me!</button> 

Sử dụng các pseudo-classes:

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

:hover là khi chuột kết thúc phần tử.

:active là khi phần tử được nhấp (và giữ).

:focus là khi bạn tab đến phần tử.

Hy vọng điều đó sẽ hữu ích!