3

ここで私がやろうとしているのは、このdivにカーソルを合わせたときにトランジションを取得することです。

すべてが正常に機能し、何もしない移行だけです。transition: all、、transition: opacityおよびで遷移プロパティを使用してみましたtransition: background。しかし、それらのどれも機能しません。

それをしているのはdisplayプロパティです。それを取り出すとうまくいくからです。他にどうすればこれを回避できますか？display老いも若きもすべてのブラウザで動作するので、私は明らかにプロパティを保持したいので。

これが私が現時点で持っているものです：

.matrix-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0); /* fallback */
    background: rgba(0,0,0,0);
    color: #fff;
    display: none;
    -webkit-transition: background 2s;
    -o-transition: background 2s;
    -moz-transition: background 2s;
    transition: background 2s;
}

a:hover .matrix-overlay {
    display: block;
    background: rgba(0,0,0,0.5);
}

不透明度や背景など、フェードを制御するために使用しているのかどうかは関係ありません。他に何をすべきかわからないだけです。

4

4 に答える 4

5

displayプロパティはCSSトランジションではサポートされていないようです（このSOの質問も参照してください）。

それを念頭に置いて、いくつかのオプションがあります。最初に、トランジション前に幅/高さを0に設定するか、要素をページからオフセットするか（などmargin-left: -9999px;）、不透明度を0に設定できます。

あなたの場合、私はおそらくこれを使用します：

.matrix-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0); /* fallback */
    background: rgba(0,0,0,0);
    color: #fff;
    display: block;
    margin-left: -9999px; /* hide element off the page */
    -webkit-transition: background 2s;
    -o-transition: background 2s;
    -moz-transition: background 2s;
    transition: background 2s;
}

a:hover .matrix-overlay {
    margin-left: 0; /* reset element position */
    background: rgba(0,0,0,0.5);
}
于 2011-05-10T14:25:38.947 に答える
3

これが私がやったことです：

    .matrix-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0); /* fallback */
    background: rgba(0,0,0,0.7);
    color: #fff;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
    filter: alpha(opacity=0);
    opacity: 0;
    -webkit-transition: opacity 0.2s ease 0s;
    -o-transition: opacity 0.2s ease 0s;
    -moz-transition: opacity 0.2s ease 0s;
    transition: opacity 0.2s ease 0s;
}

a:hover .matrix-overlay {
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    opacity: 1;
    -webkit-transition: opacity 0.15s ease 0s;
    -o-transition: opacity 0.15s ease 0s;
    -moz-transition: opacity 0.15s ease 0s;
    transition: opacity 0.15s ease 0s;
}
于 2011-05-16T18:34:40.507 に答える
0

clip要素は絶対に配置されているため、表示の代わりに使用できます

実例

例えば

.matrix-overlay {
    ...other properties, not display ...
    clip: rect(1px 1px 1px 1px); /* IE7 */
    clip: rect(1px,1px,1px,1px);

}

a:hover .matrix-overlay {
    ..other properties, not display ...
     clip: rect(auto); /* IE7 */
     clip: auto;
}

私は情報のために風変わりなIE7コードクリップコードを入れましたが、IEはとにかく遷移を行わず、必要に応じて表示コードをフィードすることもできますが、この方法では同じままです;）

于 2011-05-10T14:42:52.793 に答える
0

次のことを試すことができます。

.matrix-overlay {
    position: absolute;
    width: 100%;
    height: 100%;
    background: rgb(0,0,0); /* fallback */
    background: rgba(0,0,0,0.7);
    color: #fff;
    opacity: 0;
    pointer-events:none;
    transition: opacity 0.2s ease 0s;
}

a:hover .matrix-overlay {
    pointer-events:auto;
    opacity: 1;
    transition: opacity 0.15s ease 0s;
}

pointer-events:noneと一緒に使用すると、opacity:0とほぼ同じ効果display:noneがありますが、移行は正常に機能するはずです。

于 2013-06-23T17:51:29.040 に答える