Chuyển tiếp CSS3 trên các phần tử giả (: sau,: trước) không hoạt động?

Question

Tôi đang hiển thị thuộc tính title của liên kết trên :hover. Thuộc tính tiêu đề được nối vào liên kết qua :after…

Bây giờ tôi tự hỏi làm thế nào tôi có thể tạo hiệu ứng mờ đục của phần tử giả :after khi lơ lửng trong và lơ lửng.

html

<a class="link" href="#" title="something"></a>​ 

css

.link { 
    display:block; 
    width:50px; 
    height:50px; 
    background:red; 
} 

.link:after { 
    position:relative; 
    content: attr(title); 
    top:55px; 
    color:$blue; 
    zoom: 1; 
    filter: alpha(opacity=00); 
    opacity: 0; 
    -webkit-transition: opacity .15s ease-in-out; 
    -moz-transition: opacity .15s ease-in-out; 
    -ms-transition: opacity .15s ease-in-out; 
    -o-transition: opacity .15s ease-in-out; 
    transition: opacity .15s ease-in-out; 
} 

.link:hover:after { 
    zoom: 1; 
    filter: alpha(opacity=100); 
    opacity: 1; 
} 

Kiểm tra các bản demo: http://jsfiddle.net/d2KrC/

Bất cứ ý tưởng tại sao điều này không hoạt động?

Answer 1

WebKit (Chrome, Safari) không hỗ trợ chuyển tiếp trên các phần tử giả.

• https://bugs.webkit.org/show_bug.cgi?id=23209
• http://code.google.com/p/chromium/issues/detail?id=54699

Nó sẽ làm việc trong Firefox.

Chỉnh sửa: Sự cố trong WebKit is now resolved. Các miếng vá allready đã hạ cánh trong Chrome Carnery, vì vậy nó sẽ được hỗ trợ từ phiên bản 26 trên. Tôi không biết về Safari.

Answer 2

Có một giải pháp khá dễ dàng đối với lỗi webkit này để thực hiện chuyển tiếp hoạt động trên các lớp giả. Đây là một bài đăng trên blog tuyệt vời về nó: http://xiel.de/webkit-fix-css-transitions-on-pseudo-elements/

Về cơ bản, webkit không hỗ trợ chuyển tiếp trực tiếp nhưng bạn có thể áp dụng chuyển đổi và kiểu bạn muốn thay đổi thành phần tử gốc. Sau đó, trong lớp giả bạn đặt cùng một thuộc tính phong cách mà bạn muốn tác động, nhưng cung cấp cho họ giá trị: kế thừa. Điều đó sẽ khiến chúng kế thừa tất cả các giá trị phần tử cha, bao gồm cả quá trình chuyển đổi.

Dưới đây là một ví dụ tôi đã làm để animate: sau phần tử, lên xuống

a { 
    position: static; /* explicitly defined so not to forget that it can't be relative or :after transition hack will not work */ 
    top: 1px; /*doesnt move it because it is position static */ 
    -webkit-transition: top 200ms ease 0; 
} 
a:after { 
    content: ''; 
    position: absolute; 
    top: inherit; 
} 
a:hover { 
    top: 3px; 
} 

* Cập nhật Các lỗi đã được cố định trong Chrome Canary (kể từ tháng), nhưng vẫn dường như bị phá vỡ trong Safari. Có thể kiểm tra trạng thái và luôn cập nhật trạng thái tại đây: https://code.google.com/p/chromium/issues/detail?id=54699