用未知高度的 css 转换替换容器内容

Question

我想动态替换模态弹出窗口的内容，它可以在旧尺寸和新尺寸之间平滑过渡。

我想我可以使用 CSS 转换来做到这一点，但是到目前为止我一直没有成功。

我的设置类似于这里的 JS fiddle，我有一个容器，我用不同的宽度和高度交换了内部内容。

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

我在 fiddle here. You can read more about this from 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;
}

用未知高度的 css 转换替换容器内容

Replacing a containers content with css transition between with unkown height

html

javascript

css

jquery

transition