Мой переход CSS работает только в одну сторону

Question

Я пытаюсь создать функцию свертывания / развертывания для текстового поля с переходом CSS, но она работает только при свертывании.

HTML

<div class="toggle-text collapsed">
Click sdlkfmglksdmfblkmsdflkbmsdkfbmsldkfmblksdmfblkmsdflkbmskldfmblksdmflkbmsdflkbmsdlkfbmksldfmbklsdmfblkmsdflkbmsdlkfmblksdmfblksdmflbkmsdflkbmslkdfmblksdmfblkmsdflkbmsdlkfmbklsdfmblksdmfblkmsdflkbmsldkfmbklsdmfbklmsdlfkbmlksdfmblksmdflbkmsdlkfbmlksdfmblksdmfblkmsdflkbmsdlkfmbklsdfmblksmdflkbmsdlkffblkmsdflkbmsdlkfmblksdmfblksdmflbkmsdflkbmslkdfmblksdmfblkmsdflkbmsdlkfmbklsdfmblksdmfblkmsdflkbmsldkfmbklsdmfbklmsdlfkbmlksdfmblksmdflbkmsdlkfbmlksdfmblksdmfblkmsdflkbmsdlkfmbklsdfmblksmdflkbmsdlkfmblksdmffblkmsdflkbmsdlkfmblksdmfblksdmflbkmsdflkbmslkdfmblksdmfblkmsdflkbmsdlkfmbklsdfmblksdmfblkmsdflkbmsldkfmbklsdmfbklmsdlfkbmlksdfmblksmdflbkmsdlkfbmlksdfmblksdmfblkmsdflkbmsdlkfmbklsdfmblksmdflkbmsdlkfmblksdmffblkmsdflkbmsdlkfmblksdmfblksdmflbkmsdflkbmslkdfmblksdmfblkmsdflkbmsdlkfmbklsdfmblksdmfblkmsdflkbmsldkfmbklsdmfbklmsdlfkbmlksdfmblksmdflbkmsdlkfbmlksdfmblksdmfblkmsdflkbmsdlkfmbklsdfmblksmdflkbmsdlkfmblksdmffblkmsdflkbmsdlkfmblksdmfblksdmflbkmsdflkbmslkdfmblksdmfblkmsdflkbmsdlkfmbklsdfmblksdmfblkmsdflkbmsldkfmbklsdmfbklmsdlfkbmlksdfmblksmdflbkmsdlkfbmlksdfmblksdmfblkmsdflkbmsdlkfmbklsdfmblksmdflkbmsdlkfmblksdmfmblksdmfbMe
></div>

CSS

.toggle-text {
  word-wrap: break-word;
  width: 250px;
  transition: height 500ms;
  margin: 0 200px 0 200px;
}
.collapsed {
    height: 50px;
    overflow: hidden;
}
.expanded{
    height: 400px;
}

jQuery

$('.collapsed, .expanded').on('click', function() {
$(this).toggleClass('collapsed expanded');

});

http://jsfiddle.net/fj639rc6/166/

Answer 1

Проблема в том, что без overflow: hidden <span> имеет неопределенный размер, поэтому он не знает, к какому размеру он анимируется.Таким образом, он оживляет к infinity, что, очевидно, происходит мгновенно.Один из вариантов - попробовать overflow: scroll:

https://jsfiddle.net/fj639rc6/168/

Независимо от того, я думаю, вам понадобится узнать итоговую высоту пролета, если вы хотите анимировать.