CSS3 переход от ширины авто до «п» точки

Question

как я применяю переход CSS в DIV, который начальная ширина набора, как auto

Однако если установить начальную ширину до некоторого числа говорят 50px, переход пинки в .

Вот - 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>