web-dev-qa-db-ja.com

疑似要素（：after、：before）でのCSS3遷移が機能していませんか？

:hoverのリンクのtitle属性を表示しています。タイトル属性は、:after…を介してリンクに追加されます。

ホバリングインおよびホバリングアウト時に、:after疑似要素の不透明度をどのようにアニメーション化できるのか疑問に思っています。

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

デモをチェックしてください： http://jsfiddle.net/d2KrC/

これが機能しない理由はありますか？

csscss-transitionspseudo-element
16
matt

WebKit（Chrome、Safari）は、疑似要素の遷移をサポートしていません。

Firefoxで動作するはずです。

編集：WebKitの問題 現在は解決されています 。パッチはすでにChrome Carneryにリリースされているので、バージョン26以降でサポートされます。Safariについてはわかりません。

10
Jona

このWebkitのバグには、疑似クラスで遷移を機能させるためのかなり簡単な回避策があります。これについてのすばらしいブログ投稿があります： http://xiel.de/webkit-fix-css-transitions-on-pseudo-elements/

基本的に、webkitはトランジションを直接サポートしていませんが、変更するトランジションとスタイルをその親要素に適用できます。次に、疑似クラスに、影響を与えたいのと同じスタイルプロパティを配置しますが、値を継承します。これにより、遷移を含むすべての親要素の値が継承されます。

これは、：after要素を上下にアニメーション化するために行ったサンプルです。

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

*更新バグはChrome Canary（2月現在）で修正されましたが、Safariではまだ壊れているようです。ステータスを確認して最新情報を入手できます： https ：//code.google.com/p/chromium/issues/detail？id = 54699

5
DMTintner