CSS3過渡到「n」 PX

Question

如何申請CSS過渡到已經初始寬度設置爲auto

但是如果我設置的初始寬度一定數量說50像素，過渡踢一個div 。

這裏是 - DEMO

.container { 
    width: 200px; 
    background: red; 
    height: 50px; 
} 


.child1 { 
    background: black; 
    display: inline-block; 

} 

.child2 { 
    background: blue; 
    display: inline-block; 
    width: auto; /* this does not work */ 

    /* width: 50px; */ /* this works */ 
    float: right; 
    -webkit-transition: width 2s; 
     transition: width 2s; 
} 

.child2:hover { 
    width: 100px; 
} 

Answer 1

這是不可能的運行的動畫從auto到Npx，由於動畫被構造的方式。

例如，利用這個CSS：

.block { 
    width: 100px; 
    transition: width 2s; 
} 
.block:hover { 
    width: 200px; 
} 

這esentialy是一樣的下面的代碼：

@keyframes animate-width { 
    from { width: 100px; } 
    to { width: 200px; } 
} 

.block { 
    width: 100px; 
} 

.block:hover { 
    animate: animate-width 2s; 
} 

你可以從動畫關鍵幀，一個起始點和終點見被定義爲能夠創建適當的動畫。

爲了運行動畫，開始和終點必須可供瀏覽器的CSS渲染引擎正確運行。 auto永遠不可能是一個起點，因爲它是一個動態分配的值。

您可以通過在加載頁面後設置適當的寬度來使用JavaScript來完成這項工作。對於塊元素，將寬度設置爲100％而不是auto也可以作爲解決方案。

Answer 2

默認min-width將採取內部元素width

.container { 
 
    width: 200px; 
 
    background: red; 
 
    height: 50px; 
 
} 
 
.child1 { 
 
    background: black; 
 
    display: inline-block; 
 
} 
 
.child2 { 
 
    background: blue; 
 
    display: inline-block; 
 
    width: auto; 
 
    min-width: 0px; /*changed width to min-width */ 
 
    float: right; 
 
    -webkit-transition: 2s; 
 
    transition: 2s; 
 
} 
 
.child2:hover { 
 
    min-width: 100px; /* changed from width to min-width */ 
 
}

<div class="container"> 
 
    <div class="child1"> 
 
    child1 
 
    </div> 
 
    <div class="child2"> 
 
    child2 
 
    </div> 
 
</div>

Answer 3

相反動畫width嘗試動畫min-width的：

.container { 
 
    width: 200px; 
 
    background: red; 
 
    height: 50px; 
 
} 
 
.child1 { 
 
    background: black; 
 
    display: inline-block; 
 
} 
 
.child2 { 
 
    background: blue; 
 
    display: inline-block; 
 
    width: auto; 
 
    /* this does not work */ 
 
    min-width: 0; 
 
    float: right; 
 
    -webkit-transition: all .5s; 
 
    transition: all .5s; 
 
    padding-left: 0; 
 
} 
 
.child2:hover { 
 
    min-width: 100px; 
 
}

<div class="container"> 
 
    <div class="child1"> 
 
    child1 
 
    </div> 
 

 
    <div class="child2"> 
 
    child2 
 
    </div> 
 
</div>