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

Question

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

我认为我可以使用 CSS 过渡来做到这一点，但到目前为止我还没有成功。

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

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

我对小提琴的分支here 做了一些更改。您可以从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;
}