Tạo hiệu ứng thuộc tính chuyển tiếp CSS trong: sau /: trước các lớp giả

Question

Có thể tạo hoạt ảnh cho các lớp giả CSS không?

Nói rằng tôi có:

#foo:after { 
    content: ''; 
    width: 200px; 
    height: 200px; 
    background: red; 
    display: block; 
    -webkit-transition: all 1s ease-in-out; 
    -moz-transition: all 1s ease-in-out; 
    -o-transition: all 1s ease-in-out; 
} 

#foo:hover:after { 
    width: 250px; 
    height: 250px; 
} 

Đây có phải là thậm chí có thể? Tôi đã được thử nghiệm và cho đến nay tôi dường như không thể tìm thấy một giải pháp. Tôi đang cố gắng cắt giảm số lượng hỗ trợ JavaScript tôi cần bằng cách sử dụng Modernizr.

Tôi đã có phương pháp JavaScript, vì vậy vui lòng không có lựa chọn thay thế JavaScript nào.

Demo: http://jsfiddle.net/MxTvw/

Answer 1

Fiddle của bạn không hoạt động với tôi trong Firefox. Và theo như tôi biết, và nếu this article được cập nhật thì đây là trình duyệt duy nhất có thể làm động các phần tử giả.

---

EDIT: Tính đến năm 2016, các liên kết đến bài viết bị hỏng và relevant WebKit bug là fixed4 năm trước. Đọc để xem các câu trả lời khác, câu trả lời này đã lỗi thời.

Answer 2

Nó does not seem to work bây giờ, tuy nhiên theo W3 specs bạn có thể áp dụng hiệu ứng chuyển tiếp để pseudo-yếu tố. Có thể một thời gian trong tương lai…

Answer 3

Google Chrome bổ sung sửa chữa webkit lỗi cho Version 27.0.1453.110 m

lỗi WebKit này đã được cố định: http://trac.webkit.org/changeset/138632

Có thể animate giả :before và :after, đây là một vài ví dụ về hoạt ảnh của các yếu tố psuedo :before và :after.

Đây là một sửa đổi của các ví dụ của bạn ở trên với một số chỉnh sửa, mà làm cho nó sinh động trong và ngoài trơn tru hơn mà không có sự mô phỏng mouseleave/mouseout chậm trễ trên di chuột:

http://jsfiddle.net/MxTvw/234/

Cố gắng thêm bộ chọn chính #foo với phân lớp :hover giả trong quy tắc lớp học thứ hai :hover thứ hai của bạn. Ngoài ra thêm các transition bất động sản, và không chỉ là nhà cung cấp cụ thể tính tiền tố cho transition:

#foo:after{ 
    display: block; 
    content: ''; 
    width: 200px; 
    height: 200px; 
    background: red; 
    -webkit-transition: all .4s ease-in-out; 
    -moz-transition: all .4s ease-in-out; 
    -o-transition: all .4s ease-in-out; 
    transition: all .4s ease-in-out; 
} 

#foo, 
#foo:hover:after, 
#foo:hover:before{ 
    width: 250px; 
    height: 250px; 
} 

Lưu ý rằng đi về phía trước bất kỳ yếu tố Pseudo như :before và :after nên sử dụng cú pháp ruột đôi ::before và ::after.Ví dụ này mô phỏng một phai trong và ngoài sử dụng một lớp phủ background-color và background-image trên di chuột:

http://jsfiddle.net/MxTvw/233/

Ví dụ này mô phỏng một Animate quay trên di chuột:

http://jsfiddle.net/Jm54S/28/

Dĩ nhiên tiến lên phía trước với tiêu chuẩn css3, chúng tôi có thể sử dụng ::before và ::after.

này hoạt động trong mới nhất Firefox, Chrome, Safari, Opera 18+, IE10, IE11 (IE9 và dưới đây không hỗ trợ chuyển css3 hoặc động.)

Answer 4

Tôi chỉ phát hiện ra rằng bạn có thể làm động: sau khi và: trước (:

Mã example-

.model-item { 
    position: relative; 

    &:after { 
     content: ''; 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     top: 0; 
     right: 0; 
     background: transparent; 
     transition: all .3s; 
    } 
    } 

    .opc { 
    &:after { 
     content: ''; 
     position: absolute; 
     width: 100%; 
     height: 100%; 
     top: 0; 
     right: 0; 
     background: rgba(0, 51, 92, .75); 
    } 
    } 

tôi có div .model mục và tôi cần thiết để động của mình:. sau Vì vậy, tôi đã thêm một lớp làm thay đổi nền và tôi đã thêm mã chuyển tiếp vào chính: sau (trước khi hoạt ảnh)