Question

我正在尝试在文本发生变化时转换高度变化。

我目前正在转换CSS max-height属性，因为它比height更灵活。

我的策略是：

文本将包装在<span>#text</span>中，并放在主容器内。
然后制作范围display: inline-block，
然后将主/包装元素max-height设置为范围的clientHeight。

这几乎可行，问题是它只在前一个高度小于新高度时才转换，也就是说，它只从小到大，而不是从大到小。

以下代码。

＆＃13;

var contents = [
    "a".repeat( 10 ),
    "Bb".repeat( 30 ),
    "Cc".repeat( 40 ),
    "D".repeat( 15 ),
    "Ee".repeat( 20 ),
    "Ff".repeat( 60 ),
    "g".repeat( 25 )
]

changeText.addEventListener('click', function() {

    text.textContent = randomText();
    wrapper.style.maxHeight = text.clientHeight + 'px';
    
});

function randomText() {
    return contents[ Math.floor(Math.random() * contents.length) ];
}

＆＃13;

#wrapper {
  background-color: #ccc;
  padding: 5px 10px;
  word-break: break-all;
  width: 200px;
  overflow: hidden;
  
  /* set to the minimum height the #wrapper can be */
  max-height: 18px;
  
  transition: max-height 0.3s;
}

#wrapper > span {
  display: inline-block;
}

＆＃13;

<button id="changeText">change text</button>

<div id="wrapper">
  <span id="text">no change</span>
</div>

＆＃13;

Answer 1

编辑：我认为max-height本身不起作用的原因是span元素的高度正在将包装器的高度更改为小于之前的最大高度，因此浏览器在不使用max的情况下设置高度高度。由于max-height不用于设置高度，因此没有过渡。

-

如何设置高度和最大高度的动画？

fiddle example

var contents = [
    "a".repeat( 10 ),
    "Bb".repeat( 30 ),
    "Cc".repeat( 40 ),
    "D".repeat( 15 ),
    "Ee".repeat( 20 ),
    "Ff".repeat( 60 ),
    "g".repeat( 25 )
]
changeText.addEventListener('click', function() {
    text.textContent = randomText();
    wrapper.style.height = text.clientHeight + 'px'  
    wrapper.style.maxHeight = text.clientHeight + 'px'  
});

function randomText() {
    return contents[ Math.floor(Math.random() * contents.length) ];
}

更新css以转换高度：

#wrapper {
    background-color: #ccc;
    padding: 5px 10px;
    word-break: break-all;
    width: 200px;
    overflow: hidden;
    /* set to the minimum height the #wrapper can be */
    max-height: 18px;
    transition: all 0.3s;
}

#wrapper > span {
    display: inline-block;
}

Answer 2

工作演示：https://jsfiddle.net/2p5zjtud/1/

CSS编辑：

#wrapper {
  background-color: #ccc;
  padding: 5px 10px;
  word-break: break-all;
  width: 200px;
  overflow: hidden;

  /* set to the minimum height the #wrapper can be */
  transition: height 1s;

}

#wrapper > span {
  min-height: 1em;
  display: inline-block;
}

JS编辑：

var contents = [
    "a".repeat( 10 ),
    "Bb".repeat( 30 ),
    "Cc".repeat( 40 ),
    "D".repeat( 15 ),
    "Ee".repeat( 20 ),
    "Ff".repeat( 60 ),
    "g".repeat( 25 )
]

changeText.addEventListener('click', function() {

    text.textContent = randomText();
    wrapper.style.height = text.clientHeight + 'px';

});

function randomText() {
    return contents[ Math.floor(Math.random() * contents.length) ];
}

Answer 3

好吧，我正在使用代码片段，它从大到小，从小到大，你唯一的问题就是我能看到的宽度。

元素文本更改时的转换高度

3 个答案: