動的高さを持つ要素のCSS高さアニメーション

Question

高さが動的なdivがあり、高さが大きくなるとアニメーションを使用したいと思います。問題は、divの高さを設定できないことです（動的でなければなりません）ので、アニメーション化するものはありません。

.text { 
    transition: all .3s ease-in-out; 
    min-height: 20px; 
    max-height: 200px; 
    overflow: auto; 
} 

.max { 
    transition: all .3s ease-in-out; 
    height: 200px; 
    min-height: 200px; 
} 

https://jsfiddle.net/abk7yu34/5/

div要素が最小の高さを持っているので、縮小するアニメーションが動作することに注意してください。

純粋なCSSでこれを解決する方法はありますか？

Answer 1

height: 200px;を削除すると、アニメーションが展開され、折りたたまれます。また

は、新しい行にアニメーションを追加するには、以下を使用します。

@keyframes lineInserted { 
    from { 
    height: 0; 
    } 
    to { 
    height: 20px; /* your line height here */ 
    } 
} 
div[contenteditable] > div { 
    animation-duration: 0.3s; 
    animation-name: lineInserted; 
    transition: height 0.3s; 
} 

document.querySelector('#button').addEventListener('click', function() { 
 
    document.querySelector('.text').classList.toggle('max'); 
 
});

.text { 
 
    background: green; 
 
    color: #fff; 
 
    transition: all .3s ease-in-out; 
 
    min-height: 20px; 
 
    max-height: 200px; 
 
    overflow: auto; 
 
} 
 

 
.max { 
 
    transition: all .3s ease-in-out; 
 
    min-height: 200px; 
 
} 
 

 
@keyframes lineInserted { 
 
    from { 
 
    height: 0; 
 
    } 
 
    to { 
 
    height: 20px; /* your line height here */ 
 
    } 
 
} 
 
div[contenteditable] > div { 
 
    animation-duration: 0.3s; 
 
    animation-name: lineInserted; 
 
    transition: height 0.3s; 
 
}

<div class="text" contentEditable="true"></div> 
 
<button id="button">Click</button>

Answer 2

（ダイナミックテキストクラス上のmax-height属性を削除し、新しいへの移行をお試しください）分の高さ

.text { 
    background: green; 
    color: #fff; 
    transition: min-height .3s ease-in-out; 
    min-height: 20px; 
    overflow: auto; 
} 

.max { 
    transition: min-height .3s ease-in-out; 
    min-height: 200px; 
} 

https://jsfiddle.net/Alessi42/abk7yu34/8/

これは効果がありますか？