ホバー上でどのように幅の遷移を滑らかにすることができますか？

Question

これはおそらく超シンプルですが、私は完全に立ち往生しており、何か助けになるものは見つけられません。申し訳ありませんが、これが既に頼まれている場合は、私にそれをリンクしてください、あなたの時間を無駄にして申し訳ありません。

だから、私はこのコードを持っている：

#nav { 
 
    position: fixed; 
 
    top: 70px; 
 
    left: 70px; 
 
} 
 

 
.button { 
 
position: relative; 
 
    background: white; 
 
    text-transform: uppercase; 
 
    font-size: 11px; 
 
    letter-spacing: 2px; 
 
    border: 1px solid #eee; 
 
    width: 20px; 
 
    height: 20px; 
 
    line-height: 20px; 
 
} 
 

 
.button:hover { 
 
    width:auto; 
 
} 
 

 
.text { 
 
     overflow: hidden; 
 
} 
 

 
.icon { 
 
     float: left; 
 
     margin-right: 5px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div id="nav"> 
 
    
 
<div class="button"> 
 
<div class="icon"><i class="fa fa-home" aria-hidden="true"></i></div> 
 
<div class="text">home</div> 
 
</div> 
 
    
 
</div>

私が何をしたいのですが何をしている：それはのように見えるよう

1. は正方形内の家のシンボルを取得小さなボタン。テキスト「家」は全く見えてはならない。
2. 家の「ボタン」にカーソルを置いてテキストを表示すると、全体の幅がスムーズに拡大します。可能であれば、テキストの長さを変えてタブを増やすので、そこに入るテキストに合わせて幅を広げたいと思います。

ご迷惑をお掛けして申し訳ありません。私は本当にこれに固執しています。私は基本的なものがすでに働いているのを見ることができます。私が必要とするのは、上記の2つのポイントです。手伝ってくれてどうもありがとう。

Answer 1

例）：

#nav { 
 
    position: fixed; 
 
    top: 70px; 
 
    left: 70px; 
 
} 
 
.button { 
 
    position: relative; 
 
    background: white; 
 
    text-transform: uppercase; 
 
    font-size: 11px; 
 
    letter-spacing: 2px; 
 
    border: 1px solid #eee; 
 
    width: 20px; 
 
    height: 20px; 
 
    line-height: 20px; 
 
    -webkit-transition: width 1s; 
 
    transition: width 1s; 
 
} 
 
.button:hover { 
 
    width: 100%; 
 
} 
 
.text { 
 
    overflow: hidden; 
 
} 
 
.icon { 
 
    float: left; 
 
    margin: 0 5px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet" /> 
 

 
<div id="nav"> 
 

 
    <div class="button"> 
 
    <div class="icon"><i class="fa fa-home" aria-hidden="true"></i> 
 
    </div> 
 
    <div class="text">home</div> 
 
    </div> 
 

 
</div>

Answer 2

あなたが欲しいのは、CSSトランジションです。ボタンの最初のCSSブロックに追加されたトランジションプロパティを確認してください。

これを適切に実装するには、あなたの：ホバーセレクタの幅を変数 'auto'の値よりも正確にすることが必要です。 '100％'のようなものを試してみてください。 - この場合には、幅 - とどのくらいその変更が取るべき

#nav { 
 
    position: fixed; 
 
    top: 70px; 
 
    left: 70px; 
 
} 
 

 
.button { 
 
position: relative; 
 
    background: white; 
 
    text-transform: uppercase; 
 
    font-size: 11px; 
 
    letter-spacing: 2px; 
 
    border: 1px solid #eee; 
 
    width: 12px; 
 
    height: 20px; 
 
    line-height: 20px; 
 

 
    -webkit-transition: width 1s; 
 
    transition: width 1s; 
 
} 
 

 
.button:hover { 
 
    width: 100%; 
 
} 
 

 
.text { 
 
     overflow: hidden; 
 
} 
 

 
.icon { 
 
     float: left; 
 
     margin-right: 5px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div id="nav"> 
 
    
 
<div class="button"> 
 
<div class="icon"><i class="fa fa-home" aria-hidden="true"></i></div> 
 
<div class="text">home</div> 
 
</div> 
 
    
 
</div>

あなたが変更されようとしている他にどのようなプロパティの移行のプロパティで定義します注意：このを見てみましょう場所 - 1秒など。また、1秒が遅すぎる場合は、1/10秒も使用できます。

"transition：width。[x] s;"

Answer 3

使用transition: all 1s;

参考：あなたは、いくつかの左余白にアイコンを中央にして、いくつかのより多くのためにw3schoolsを参照してください（ホバー効果のためのCSSトランジションを使用することができます https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

#nav { 
 
    position: fixed; 
 
    top: 70px; 
 
    left: 70px; 
 
} 
 

 
.button { 
 
    position: relative; 
 
    background: white; 
 
    text-transform: uppercase; 
 
    font-size: 11px; 
 
    letter-spacing: 2px; 
 
    border: 1px solid #eee; 
 
    width: 18px; /* <-- match this width better */ 
 
    height: 18px; 
 
    line-height: 20px; 
 
    transition: all 1s; /* <-- CSS3 transition */ 
 
} 
 

 
.button:hover { 
 
    width:6em; /* <-- set a defined width */ 
 
} 
 

 
.text { 
 
     overflow: hidden; 
 
} 
 

 
.icon { 
 
     float: left; 
 
     margin-right: 5px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div id="nav"> 
 
    
 
<div class="button"> 
 
<div class="icon"><i class="fa fa-home" aria-hidden="true"></i></div> 
 
<div class="text">home</div> 
 
</div> 
 
    
 
</div>

Answer 4

使用遷移とセット幅。幅：トランジション

#nav { 
 
    position: fixed; 
 
    top: 70px; 
 
    left: 70px; 
 
} 
 

 
.button { 
 
    position: relative; 
 
    background: white; 
 
    text-transform: uppercase; 
 
    font-size: 11px; 
 
    letter-spacing: 2px; 
 
    border: 1px solid #eee; 
 
    width: 20px; 
 
    height: 20px; 
 
    line-height: 20px; 
 
    overflow: hidden; 
 
    transition: linear 0.3s; 
 
} 
 

 
.button:hover { 
 
    width: 100%; 
 
    
 
} 
 

 

 
.icon { 
 
     float: left; 
 
     margin-right: 5px; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div id="nav"> 
 
    
 
<div class="button"> 
 
<div class="icon"><i class="fa fa-home" aria-hidden="true"></i></div> 
 
<span class="text">home</span> 
 
</div> 
 
    
 
</div>

Answer 5

と自動doesntの麦汁Paulie_Dはwidth: autoに移行することはできません述べたように。代わりに、非ホバー状態の意図された幅のmax-widthを追加し、意図したホバー状態幅と同じかそれ以上のmax-widthに遷移することができます。以下の例：

#nav { 
 
    position: fixed; 
 
    top: 70px; 
 
    left: 70px; 
 
} 
 

 
.button { 
 
    position: relative; 
 
    background: white; 
 
    text-transform: uppercase; 
 
    font-size: 11px; 
 
    letter-spacing: 2px; 
 
    border: 1px solid #eee; 
 
    width: auto; 
 
    min-width: auto; 
 
    max-width: 15px; 
 
    height: 20px; 
 
    line-height: 20px; 
 
    padding-right: 5px; 
 
    transition: max-width 1s; 
 
} 
 

 
.button:hover { 
 
    max-width: 200px; 
 
} 
 

 
.text { 
 
    overflow: hidden; 
 
} 
 

 
.icon { 
 
    width: 20px; 
 
    float: left; 
 
    margin-right: 5px; 
 
    text-align: center; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css" rel="stylesheet"/> 
 

 
<div id="nav"> 
 
    
 
<div class="button"> 
 
<div class="icon"><i class="fa fa-home" aria-hidden="true"></i></div> 
 
<div class="text">home</div> 
 
</div> 
 
    
 
</div>