0

HTML:

<link rel="stylesheet" type="text/css" href="s.css"/>
<div id="xd"><ul>a</ul></div>

CSS:

#xd ul {
    visibility: hidden;
    transition: all 1s;
}

Chrome 27 では、「a」が 1 秒間表示されてから消えます。これは可視性でどのように起こりますか: 非表示; ?

なぜこれが起こるのか説明してください。

ありがとうございました。

4

1 に答える 1

2

CSS にはvisability:hiddenとの違いがあります。display:noneあなたが望むもののために、私はあなたの問題を軽減するために代わりにこのようなことをします:

CSS:

  #xd ul {
        display: none;
        transition: all 1s ease-in-out;
    }

HTML:

  <ul id="xd"><ul><li>a</li></ul></ul>

2 つの違いの説明については、詳細情報のリンクを次に示します: http://www.w3schools.com/css/css_display_visibility.asp

基本的に、上記のリンクを言い換えると、visability:hiddenは要素の周囲のスペースを保持し、レイアウトの残りの部分に影響を与えますが、レイアウトdisplay:noneの残りの部分には影響を与えず、要素がページから完全に削除されたかのように機能します。visability:hiddenそのため、要素が非表示になる前に最初に要素を表示する Chrome の癖がある可能性があります。

JSFiddle の例: http://jsfiddle.net/JKA8z/

于 2013-07-04T01:28:12.843 に答える