CSS3 Переход: оживить ребенка до 100% ширины, родительский прыжок до 100% ширины моментально

Question

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

Это можно преодолеть, если установить фиксированную ширину пикселя для родительского контейнера, но проблема в том, что я не всегда знаю ширину содержимого. Поэтому я использовал процент, чтобы получить его динамическим.

Я действительно не знаю, как объяснить это ясно, так что я сделал скрипку, чтобы показать вам: http://jsfiddle.net/cgHcP/

HTML:

<div class="right"> 
    <div style="background-color: #000; display: inline-block;"> 
     <div class="roll-button"> 
      <div class="icon">x</div> 
      <div class="text">Remove</div> 
     </div> 
    </div> 
    <div style="background-color: #000; display: inline-block;"> 
     <div class="roll-button"> 
      <div class="icon">x</div> 
      <div class="text">Remove</div> 
     </div> 
    </div> 
</div> 

CSS:

/* Roll Button */ 
div.roll-button { 
    float: right; 
    display: inline; 
    position: relative; 
    height: 24px; 
    width: 24px; 
    -webkit-box-shadow: 0 0 0 2px #fff; 
    -webkit-border-radius: 12px; 
    text-align: center; 
    vertical-align: middle; 
    background-color: #fff; 
    overflow: hidden; 
    -webkit-transition: width .5s ease-in-out; 
    transition: width .5s ease-in-out; 
} 

div.roll-button .icon { 
    left: 0; 
    display: inline; 
    position: absolute; 
    font-size: 24px; 
    width: 24px; 
    height: 24px; 
    background-color: #ff3e3e; 
    -webkit-border-radius: 12px; 
    -webkit-transition: all .5s ease-in-out; 
    transition: all .5s ease-in-out; 
    text-align: center; 
    vertical-align: middle; 
    color: #fff; 
    line-height: .7; 
} 

div.roll-button .text { 
    float: left; 
    display: inline; 
    position: relative; 
    height: 24px; 
    overflow: hidden; 
    -webkit-transition: all .5s ease-in-out; 
    transition: all .5s ease-in-out; 
    vertical-align: middle; 
    line-height: 24px; 
    color: #ff3e3e; 
    font-weight: 700; 
    padding: 0 0 0 24px; 
    font-size: 12px; 
} 

div.roll-button:hover .text { 
    padding: 0 5px 0 29px; 
} 

div.roll-button:hover .icon { 
    -webkit-transform: rotateZ(-180deg); 
} 

div.roll-button:hover { 
    width: 100%; 
} 

.right { 
    float: right; 
    margin-right: 200px; 
} 

Когда вы смотрите на скрипку, вы заметите родительский контейнер (черный), прыгаете в полный размер при зависании. Хотя ребенок, кажется, растет постепенно. Такое поведение вызывает проблемы при добавлении нескольких элементов в строку (например, в скрипке и именно то, что я хочу сделать).

Я пытаюсь сделать эту кнопку чисто с CSS, но это то место, где я застреваю. У кого-нибудь есть предложение, как это можно сделать, используя чисто CSS?

Answer 1

Трюк для достижения того, что вы хотите, использует width:auto на .text и ограничение max-width его .. new working jsFiddle

div.roll-button .text { 
    width: auto; 
    max-width:0px; 
} 

div.roll-button:hover .text { 
    max-width:100px; /* set this to the maximum allowed value.. */ 
} 

Answer 2

Хорошо, это казалось много хлопот, чтобы получить эту работу без использования javascript, поэтому я решил использовать javascript с помощью jQuery.

Теперь я устанавливаю ширину в реальных пикселях, чтобы обойти проблему, которая по-прежнему встречается в большинстве браузеров при переходе от ширины пикселя к авто или проценту. Я сделал это, создав элемент оболочки с переполнением: скрытый и суммировал ширину дочерних элементов. Эта сумма, которую я использовал, чтобы установить ширину кнопки в реальных пикселях.

Кроме того, я добавил таймер, чтобы закрыть кнопку в течение заданного промежутка времени. Моя идея для этой кнопки заключалась в том, чтобы не показывать диалог удаления, спрашивающий, действительно ли контент должен быть удален. Может быть, эта скрипка будет полезна кому-то другому.

Проверьте мою последнюю скрипку за final result.

HTML

<div class="roll-button"> 
    <div class="icon">x</div> 
    <div class="label">Short Label</div> 
</div> 
<div class="roll-button"> 
    <div class="icon">x</div> 
    <div class="label">This is a very long label</div> 
</div> 

CSS

body { 
    background-color: #ff3e3e; 
} 

.roll-button { 
    margin-right: 12px; 
    float: right; 
    display: inline-block; 
    width: 24px; 
    height: 24px; 
    overflow: hidden; 
    -webkit-transition: all .5s ease-in-out; 
    -moz-transition: all .5s ease-in-out; 
    -o-transition: all .5s ease-in-out; 
    transition: all .5s ease-in-out; 
    white-space: nowrap; 
    -webkit-border-radius: 12px; 
    -moz-border-radius: 12px; 
    border-radius: 12px; 
    background-color: rgba(255,255,255,1); 
    -webkit-box-shadow: 0 0 0 2px rgba(255,255,255,1); 
    -moz-box-shadow: 0 0 0 2px rgba(255,255,255,1); 
    box-shadow: 0 0 0 2px rgba(255,255,255,1); 
} 

.roll-button .icon { 
    display: inline-block; 
    -webkit-transition: all .5s ease-in-out; 
    -moz-transition: all .5s ease-in-out; 
    -o-transition: all .5s ease-in-out; 
    transition: all .5s ease-in-out; 
    width: 24px; 
    height: 24px; 
    background-color: #ff0000; 
    -webkit-border-radius: 12px; 
    -moz-border-radius: 12px; 
    border-radius: 12px; 
    -webkit-box-shadow: 0 0 0 2px rgba(255,255,255,1); 
    -moz-box-shadow: 0 0 0 2px rgba(255,255,255,1); 
    box-shadow: 0 0 0 2px rgba(255,255,255,1); 
    text-align: center; 
    vertical-align: middle; 
} 

.roll-button .label { 
    display: inline-block; 
    height: 24px; 
    padding: 0 15px 0 5px; 
} 

.roll-button.open .icon { 
    -webkit-transform: rotateZ(-180deg); 
} 

JavaScript/JQuery

$(function() { 
    $('.roll-button').bind('click',function() { 
     var iconWidth = $(this).find('.icon').outerWidth(); 
     var newWidth = 0; 
     var timer = []; 
     var $elm = $(this); 
     $(this).children().each(function(){ newWidth += $(this).outerWidth(); }); 
     if(!$(this).hasClass('open')) { 
      $(this).addClass('open').css({'width':newWidth+'px'}); 
      setTimeout(function() { 
       $elm.removeClass('open').css({'width':iconWidth+'px'}); 
      },5000); 
     } 
    }); 
});