-1

混乱している場合はアドバイスしてください。ただし、可視性に移行するポイントはありますか？不透明度は確かにきちんとした効果を生み出します。ただし、ブロックしないように変更すると、すぐに灘から完全になります。たぶん、ある時間間隔でその発生を広げることができますが、移行は一度に起こります。それとも私は間違っていますか？

これが私が作成しているコードです。最後の3行を最初のスタイルのままにする必要がありますか？

div.contentItem{
    border: 2px solid #00bb00;
    border-radius: 20px;
    background-color: Beige;
    padding: 10px;
    -webkit-transition: visibility 3.0s, opacity 3.0s;
    -moz-transition: visibility 3.0s, opacity 3.0s;
    -o-transition: visibility 3.0s, opacity 3.0s;
}

div.contentItemHidden{
    opacity: 0;
}

div.contentItemVisible{
    opacity: 1;
}

以前、最後の2つの句にブロックスタイルがありましたが、実際には不透明度の遷移が破損していました（おそらく、display：noneを使用すると、要素がまったく不透明になりません）。

div.contentItemHidden{
    display: none;
    opacity: 0;
}

div.contentItemVisible{
    display: block;
    opacity: 1;
}
4

1 に答える 1

4

はい、にトランジションを設定する必要がありvisibilityます。要素を使用するだけの場合opacity、その要素は引き続き存在し、その下にあるものに対するクリックとホバー効果をブロックします。を使用visibility: hiddenすると、要素は表示されなくなります（と同様opacity: 0）が、クリックすることはできません。

visibilityこれは、なぜopacity一緒に使用する必要があるのか​​、そしてそれを正しく行う方法をより詳細に説明するのに役立つリンクです： http ://www.greywyvern.com/?post=337

visibilityちなみに、あなたがあなたの質問で言及しているのに気づきましたがdisplay、あなたのコードにはあります。可視性と表示には違いがあることに注意してください。特に、要素visibility: hiddenは表示されませんが、それでもスペースを占有します。の要素display: noneは表示されませんが、スペースを占有しません。

于 2012-08-04T21:28:17.373 に答える