Замена содержимого контейнера с переходом CSS между неизвестной высотой

Question

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

Я думал, что смогу сделать это, используя переход CSS,однако до сих пор у меня ничего не получалось.

Моя установка похожа на скрипку JS, где у меня есть контейнер, и я меняю внутреннее содержимое с другой шириной и высотой.

http://jsfiddle.net/Lsf76eby/24/

html

<input type="button" value="press me" onclick="changeDiv()" />

<div id="container">
    <div id="a">
    </div>
</div>

js

function changeDiv(){
    var b = $('<div id="b">');
    $('#container').empty().append(b);
}

css

#container{
  transition: 2s;
  height: auto;
}

#a {
  height: 200px;
  width: 200px;
  background:blue;
}

#b {
  height: 400px;
  width: 300px;
  background:red;
}

Answer 1

Я сделал несколько изменений в форке скрипки здесь .Вы можете прочитать больше об этом из https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

Я добавил новую функцию javascript, добавил свойство css и немного реорганизовал css

• Вы должны определить всесвойства, которые вы зададите для перехода, используя transition-property
• Одно существенное изменение заключается в том, что моя функция javascript (адаптированная из MDN) переключает классы на один div, а не переключает сам div.

Надеюсь, это поможет!

html

<div id="container">
    <div id="target" class="a">
    </div>
</div>

javascript

//pretty much straight from the MDN doc...
function updateTransition() {
  var el = document.querySelector("div.a");

  if (el) {
    el.className = "b";
  } else {
    el = document.querySelector("div.b");
    el.className = "a";
  }

  return el;
}

css

#container{
  height: auto;
}
#target{
  transition: 2s;
  transition-property: width height background-color;
}

.a {
  height: 200px;
  width: 200px;
  background-color:blue;
}

.b {
  height: 400px;
  width: 300px;
  background-color:red;
}