元素文本更改時的過渡高度

Question

我試圖在文本更改時過渡高度更改。

我目前正在過渡CSS max-height屬性，因爲它比height更靈活。

我的策略是：

1. 文字將被包裹在一個<span>#text</span>和放置在主容器內。
2. 然後進行跨度display: inline-block，
3. 然後設置主/包裝元素的max-height的跨度clientHeight。

這幾乎奏效，問題在於它只有在前一個高度小於新高度時纔會轉換，也就是說，它只是從小到大，而不是從大到小轉變。

以下代碼。

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) ]; 
 
}

#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; 
 
}

<button id="changeText">change text</button> 
 

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

Answer 1

嗯，我正在使用的代碼片段，然後從大去小，從小到大，你唯一的問題是，從我所看到的寬度。

Answer 2

編輯：我認爲max-height本身不起作用的原因是span元素的高度正在將包裝的高度改變爲小於先前的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 3

工作演示：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) ]; 
}