css3トランジション、動作していない右側のナビゲーションカラムの幅の変更

Question

右側のナビゲーションカラムの幅が正しく動作しない理由は何でしょうか。

単純なデモを行うと、ホバーの幅が大きくなりますが、完全なプロジェクトでは幅は変化しませんが、列は左に移動します。

ご迷惑をおかけして申し訳ございませんが、エラーとデモのリンクを削除しました。その理由を見つけたため、コード例を使用して解決策を説明しています。

Answer 1

私は;、または,の欠落はなく、遷移定義で;、構文で小さなミスでエラー ）を再現することができます。

2）！重要なのは要素の上に置くことですが、遷移の上には置かないでください。

いくつかの移行リストで間違いを犯すと、間違い（右のナビゲーションバーの幅が所定量だけ増加する）まで間違い（left）が発生するまで遷移します。残りのトランジションは機能しません（width）（右のナビゲーションバーは左に移動しますが、幅は保持されます）。

//ERROR 
@media only screen and (max-width: 600px) { 
    div.navWrapT:hover { 
     left:30vw; width:70vw, right:1px; //will give this error 
    } 
} 

//CORRECT 

@media only screen and (max-width: 600px) { 
    div.navWrapT:hover { 
     left:30vw; width:70vw !important; right:1px; 
    } 
} 

全コード（あなたはそれが作業を取得するために、右の完全削除することができます）：

<style> 

div.sliderWrap { 
    height: 100vh; 
    width: 90vw; 
    position: relative; 
    margin: 0px; 
    padding: 0px; 
    border: 0px; 
    overflow : hidden; 
    z-index : 100; 
} 

.nav { width : 70vw; } 

div.navWrapT { 
    position :absolute; 
    top : 0px; 
    left : 70vw; 
    width : 28vw; 
    right: 1px; 
    border: 0px; /*3px solid violet; //remove the border to make it working */ 
    margin : 5px; 
    padding : 0px; 
    height : 100%; 
    background : green; 
    transition: width ease-out 1s, left ease-out 1s, right ease-out 1s; 
     /* */ 
} 

a.aBtn { 
    display: block; 
    border: 1px solid black; 
    position: relative; 
    /* transition: 0.5s all; */ 
    /* transition-delay: 1s; */ 
    height: 30px; 
    width : 100%; 
    /* transition: width ease-out 1s, left ease-out 1s; */ 
} 

span.navDescr { 
    color : back; 
} 


@media only screen and (max-width: 600px) { 
    div.navWrapT:hover { 
     left:30vw; width:70vw, right:1px; 
     /* */ 
    } 
} 
</style> 




    <div class="outestWrap" > 
    <div class="sliderWrap" > 
    <span class="nav"> 
<span class="nav"> 

<div class="navWrapT" > 

<a href="#nav0_1" class="aBtn"><span class="navDescr">Main</span></a> 

<a href="#nav0_2" class="aBtn"><span class="navDescr">Location, map</span></a> 

<a href="#nav0_3" class="aBtn"><span class="navDescr">Room types, suites </span></a> 

<a href="#nav0_4" class="aBtn"><span class="navDescr">Busines, office, work room </span></a> 

<a href="#nav0_5" class="aBtn"><span class="navDescr">Parking </span></a> 

<a href="#nav0_6" class="aBtn"><span class="navDescr">Services </span></a> 

<a href="#nav0_7" class="aBtn"><span class="navDescr">Policies </span></a> 

<a href="#nav0_8" class="aBtn"><span class="navDescr">Food/cloth/hygiene </span></a> 

<a href="#nav0_9" class="aBtn"><span class="navDescr">Transport </span></a> 

<a href="#nav0_10" class="aBtn"><span class="navDescr">Sport </span></a> 

<a href="#nav0_11" class="aBtn"><span class="navDescr">Awards, history, about </span></a> 

</div> 

     <ul><li></li><li></li></ul> 

</span></span> 
     </div> </div>