CSSトランジション - 問題

さて、私は、CSSのトランジションをどのようにして動作させるのにいくつかの問題を抱えています。そして、CSSでいくつかの経験を積んだ人に、私は達成したい。CSSトランジション - 問題

実際の最初の移行はうまくいきましたが、ここでは2つの問題があります。

最初に、ナビゲーションバーの2番目のボタン/リンク - 文字 - には、3つのサブリンクがあります。これらのサブリンクは、文字ボタンが上に表示されたときに表示されます。これらのサブリンクは、文字ボタンの実際の遷移が行われるまで表示されないようにしたいと思います。私はあなたが何を言っているのか願っています。それで、これが可能ですか？あれば、どうですか？

第2に、私がしているのは、ボタン/リンクがロールオーバーされたときのトランジションですが、ロールアウトされたときのトランジションはありません。代わりに、ロールアウト時に即座にデフォルトの状態に戻り、トランジション効果を本当に損なうと感じます。だから、私はホバーアウトだけでなく、ホバリング中のため移行を設定することが可能であるかどうかを知りたいのです

をここに私のHTMLコードは次のとおりです。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
<title>Home</title> 
<link rel="stylesheet" href="complex_1.css"/> 
</head> 

<body> 
    <ul id="navbar"> 
    <li id="home"><a href="#">Home</a></li> 
    <li id="characters"><a href="#">Characters</a> 
     <ul> 
      <li id="subzero"><a href="#">Sub-Zero</a></li> 
      <li id="scorpion"><a href="#">Scorpion</a></li> 
      <li id="kano"><a href="#">Kano</a></li> 
     </ul> 
    </li> 
    <li id="about"><a href="#">About</a></li> 
    <li id="contact"><a href="#">Contact</a></li> 
    </ul> 
</body> 
</html>

、問題のCSSコードへそれ：私はここで何をしたいのかで私を助けることができる誰にも事前に

ul { /* Sets out the dimensions of the unordered list. */ 
    font-family:Verdana; 
    font-size: 17px; 
    margin: 0px; 
    padding: 0px; 
    list-style:none; 
    position:absolute; 
    letter-spacing:1px; 
} 

ul li { /* All list items of unordered lists. */ 
    display: block; 
    position: relative; 
    text-align:center; 
    float: left; /* Makes the navigation bar horizontal instead of vertical. */ 
} 

li ul { 
    display: none; /* Hides the dropdown menu list items by default. */ 
} 

ul li a { /* All list items of unordered lists that are links. */ 
    color: #ffffff; 
    background: #000000; 
    display:block; 
    text-decoration: none; 
    border-top: 1px solid #ffffff; 
    padding: 7px 40px 7px 40px; 
    margin-left: 0px; 
    white-space: nowrap; 
} 

ul li a:hover { 
    -moz-transition-property:background-color; 
    -moz-transition-duration:400ms; 
    -moz-transition-timing-function:ease-in-out; 
    color:#ffffff; 
    background: #ff0000; 
    } 

li:hover ul { 
    display:block; 
    width:182px; 
} 

li:hover li { 
    display:block; 
    font-size:10px; 
    float:none; 
} 

li:hover a { 
    background: #000000; /* This is where you apply the colour you want for the dropdown list items off the main menu. */ 
} 

li:hover li a:hover { 
    color: #ffffff; 
    background: #ff0000; /* This is where you apply the colour you want for the hover over the list. */ 
}

のおかげで、それは本当に非常に高く評価されます。

出典

2012-05-03 Hashim

あなたの質問にいつ回答したかを覚えていますか？ – sheriffderek

母親、申し訳ありませんが、私は大学時代の最善の時を過ごした時に、最高の焦点を持っていません。 – Hashim

OK。そう。代わりに特定のセレクタに遷移プロパティを置くの回答1.

、ちょうどこのようなセレクタを作ってみてください。

.trans { 
    -webkit-transition: all 300ms linear; 
    -moz-transition:  all 300ms linear; 
    -ms-transition:  all 300ms linear; 
    transition:   all 300ms linear; 
}

次に、あなたのHTMLアンカータグで=「トランス」クラスを適用することができます。

遷移が "in"ではなく "out"でしか起こらない理由は、それがホバーに適用されているためです。通常のセレクタと：ホバー状態の両方に適用する必要があります。

上記はきれいで短い形式ですが、時には異なる移行時間が必要になることもあります。その場合

：

.my-thing { 
    -webkit-transition: all 300ms linear; 
    -moz-transition:  all 300ms linear; 
    -ms-transition:  all 300ms linear; 
    transition:   all 300ms linear; 
} 

.my-thing:hover { 
    -webkit-transition: all 600ms linear; 
    -moz-transition:  all 600ms linear; 
    -ms-transition:  all 600ms linear; 
    transition:   all 600ms linear; 
}

回答2.

あなたは移行を遅らせることができます。あなたのケースでは、表示：なしからブロックへの移行。

.delay { 
    transition-delay: 300s; 
    -moz-transition-delay: 300s; 
    -webkit-transition-delay: 300s; 
    -o-transition-delay: 300s; 
}

だから、これをsub ulなどに適用することができます。

一般に、私はあなたのセレクタを考え直します。あなたの興奮のように、あなたは物事をもっと複雑にしていなければなりません。

チェックアウトthis jsFiddle

ドロップダウンをアニメーション化するには、Javaスクリプトが必要な場合があります。私は表示上の遷移を得ることができません：ブロックするためになし。しかし、フィドルをチェックしてください。私はあなたの質問に答えて、上記の両方のソリューションの例を示していると思います。がんばろう！

出典

2012-12-03 04:55:02 sheriffderek

2013年10月現在、おそらくsassを使用し、マークアップに '.trans'クラスを追加するのではなく、いくつかの異なる遷移のために混合を行い、それらを' @ include'または '@ extend'します。 – sheriffderek

こちらをご覧ください。webkit transition example私はそれがWebkitのためであることを知っていますが、それは助けるかもしれません。 onmouseout属性を使用すると、要素から移動するときに使用されます。代わりに:hover状態のul li aへの移行コードを入れて、あなたの質問の後半部分に答えるために

出典

2012-05-03 13:22:39 ColWhi

は、それがすべての状態（:link、:hover、:focus、:active）のために働くだろうことを意味します。

サブメニューを移行する場合は、ul li ul {}に遷移コードを入力してみてください。 displayプロパティの移行はあまりうまくいかないので、おそらくopacity（またはheightなどの他のもの）も試してみてください。 ul li ul {opacity: 0;} ul li:hover ul {opacity: 1;}と設定します。

出典

2012-05-03 13:39:39

CSSトランジション - 問題

答えて

関連する問題