Задача

Я пытаюсь анимировать div до 100% от его детской ширины. Я обнимаю максимальную ширину при наведении курсора, но он сразу же подталкивает div к себе, а не плавно анимирует его вправо. Кто-нибудь может понять, почему он не анимируется правильно? Я бы предпочел не использовать javascript, если это возможно.Анимация Div до 100% ширины css

Моя попытка

Я скопировал ниже скрипку:

http://jsfiddle.net/tVHYg/1662/

в следующий источник

.contents { 
 
    white-space:nowrap; 
 
    display:inline-block; 
 
} 
 

 
.inner { 
 
    background:#c3c; 
 
    width: 100%; 
 
    max-width:50px; 
 
    
 
    overflow:hidden; 
 
    transition: all .3s ease-in-out; 
 
    padding: 5px 0 5px 0; 
 
} 
 

 
.contents:hover .inner { 
 
    max-width:100%; 
 
}

<div class="contents"> 
 
     <div class="inner">A bit of text never hurt anyone</div> 
 
    </div> 
 
    
 
     <div class="contents"> 
 
     <div class="inner">A bit of text never hurt anyone</div> 
 
    </div>

источник

2016-02-15 user2662833

Процент является вопрос относительно вашего кода и, вероятно, потому, что у вас есть width: 100%; и в то же время у вас есть max-width: 50px; для внутреннего класса.

Использование пикселей исправляет это. любые пиксели более размера коробки просто анимировать его быстрее, например, max-width: 1000px; просто ускорить анимацию без расширения границ коробки

.contents { 
 
    white-space:nowrap; 
 
    display:inline-block; 
 
} 
 

 
.inner { 
 
    background:#c3c; 
 
    width: 100%; 
 
    max-width:50px; 
 
    
 
    overflow:hidden; 
 
    transition: all .5s ease-in-out; 
 
    padding: 5px 0 5px 0; 
 
} 
 

 
.contents:hover .inner { 
 
    max-width:1250px; 
 
}

<div class="contents"> 
 
     <div class="inner">A bit of text never hurt anyone</div> 
 
    </div> 
 
    
 
     <div class="contents"> 
 
     <div class="inner">A bit of text never hurt anyone</div> 
 
    </div>

источник

2016-02-16 00:04:09 Tasos

Но это создает новую проблему, когда, если вы установите максимальную ширину слишком большой, анимация займет некоторое время, чтобы начать выигрывать Не так ли? – user2662833

@ user2662833 - не тогда, когда он начинается, но когда он возвращается к исходному размеру - i изменен до max-width: 1250px; видеть - идеалистично нужна точная ширина в пикселях и не больше – Tasos

Да, но это проблема в моем случае использования, потому что я не буду знать ширины divri apriori. Это именно то, что я хотел сделать, но я не был уверен, как заставить его работать для любого размера div. – user2662833

Я обнимаю максимальную ширину при наведении курсора, но он толкает div на , это сразу же очень круто, вместо того, чтобы анимировать его плавно на справа.

просто добавить transition-delay к :hover .inner и изменить transition-function от ease-in-out к linear, чтобы быть более гладкой

.contents { 
 
    white-space: nowrap; 
 
    display: inline-block; 
 
} 
 
.inner { 
 
    background: #c3c; 
 
    width: 100%; 
 
    max-width: 50px; 
 
    overflow: hidden; 
 
    padding: 5px 0 5px 0; 
 
    transition: all .3s linear; 
 
    
 
} 
 
.contents:hover .inner { 
 
    max-width: 100%; 
 
    transition-delay:.5s 
 
    
 
    
 
}

<div class="contents"> 
 
    <div class="inner">A bit of text never hurt anyone</div> 
 
</div> 
 

 
<div class="contents"> 
 
    <div class="inner">A bit of text never hurt anyone</div> 
 
</div>

источник

2016-02-15 23:49:49 dippas

я считаю, что он хочет сделать то, что осталось DIV делает не автоматически нажимайте правый div на дальний конец, но делайте это постепенно. –

Я вижу вашу точку зрения, я изменил функцию перехода на 'linear' – dippas

, чтобы увидеть другой ответ, полагайте, что он этого хочет. –

Вы можете сделать это с display: inline-flex

.container { 
 
    display: inline-flex; 
 
} 
 

 
.contents { 
 
    display: inline-flex; 
 
    transition: all .3s ease-in; 
 
    overflow: hidden; 
 
    width: 50px; 
 
    margin: 2px; 
 
} 
 

 
.inner { 
 
    background:#c3c; 
 
    white-space:nowrap; 
 
    padding: 10px 0; 
 
} 
 

 
.contents:hover { 
 
    transition-delay: 0.2s; 
 
    width: 100%; 
 
}

<div class="container"> 
 
    <div class="contents"> 
 
    <div class="inner">A bit of text never hurt anyone</div> 
 
    </div> 
 

 
    <div class="contents"> 
 
    <div class="inner">A bit of text never hurt anyone</div> 
 
    </div> 
 
</div>

источник

2016-02-16 00:01:29

, которое создает промежуток между полями, и если вы также наводите курсор в правом поле, он слегка сдвигает левый флажок влево. – Tasos

Да, он все еще, кажется, толкает коробки (и разрыв между ящиками, кажется, увеличивается) – user2662833

Анимация Div до 100% ширины css

Задача

Моя попытка

ответ

Смежные вопросы