时间戳

首页 > 解决方案 > 用未知高度之间的 css 转换替换容器内容

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

问题描述

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

我以为我可以使用 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;
}

标签： javascriptjqueryhtmlcsstransition

解决方案

我在这里做了一些改动。您可以从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;
}

推荐阅读