высота Перехода обертка DIV, когда высота ребенка меняется

Так что я подозреваю, CSS3 переходы не являются ответом на это, но вот что я пытаюсь выполнить:высота Перехода обертка DIV, когда высота ребенка меняется

В сценарии сНа обертки/ребенок, ребенок ДИВ выгружается для div другой, неизвестной высоты. Это приводит к резкому изменению высоты. Я хочу, чтобы изменение высоты менялось плавно, переходы свойств la CSS3.

Вот бункер: http://jsbin.com/hakanulodo/9/edit

А адрес ссылки гнили, вот исходный код БИН в:

# HTML 
<!DOCTYPE html> 
<html> 
<head> 
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script> 
    <meta charset="utf-8"> 
    <title>JS Bin</title> 
</head> 
<body> 
    <div class="wrapper"> 
    <div class="child"> 
     Original 
    </div> 
    </div> 
    <div class="new"> 
    New 
    </div> 
</body> 
</html> 

# css 
.wrapper { 
    transition: height 0.25s ease 0.2s; 
} 

.child { 
    height: 100px; 
    width: 100px; 
    line-height: 100px; 
    text-align: center; 
    background: purple; 
    color: white; 
} 

.new { 
    display: none; 
    height: 200px; 
    width: 100px; 
    line-height: 100px; 
    text-align: center; 
    background: blue; 
    color: white; 
} 

# javascript 
$('.wrapper').click(function() { 
    var item = $('.new').css("display", "block"); 
    $('.wrapper').html(item); 
});

Я открыт для решения JS, а также CSS. Заранее спасибо!

источник

2014-11-19 steel

Вы не можете перевести атрибут ('display' none to 'block').
Почему вы хотите использовать div вне класса 'wrapper'? можно ли просто добавить класс и изменить имя div?

HTML:

<div class="wrapper"> 
    <div class="child"> 
     Original 
    </div> 
</div>

CSS:

.child { 
    height: 100px; 
    width: 100px; 
    line-height: 100px; 
    text-align: center; 
    background: purple; 
    color: white; 
    -webkit-transition: height 0.50s ease 0.2s; 
    -moz-transition: height 0.50s ease 0.2s; 
    transition: height 0.50s ease 0.2s; 
} 

.new { 
    height: 200px; 
    background: blue; 
}

Jquery:

$('.child').click(function() { 
    $(this).addClass('new').html('New'); 
});

пример: http://jsbin.com/jivevasawi/1/edit?html,css,js,output

источник

2014-11-19 19:03:55

Спасибо за реагировании! 1. Я не перехожу к атрибуту отображения, но точка взята. 2. В этом случае я получаю совершенно новый объект обратно с сервера, который мне нужно поменять местами, поэтому изменение класса не является вариантом, хотя это, безусловно, облегчило бы его. – steel

ОК, вот оно с jquery: http://jsbin.com/gazuhoxuli/1/edit?html,css,js,output –

Ницца! Это очень умно, я не знал о .promise(). Однако вам все равно нужно знать конечную высоту. Есть ли способ сделать это, не зная высоты конца? – steel

высота Перехода обертка DIV, когда высота ребенка меняется

ответ

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