我的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/

无论如何，如果您想制作动画，我认为您需要知道跨度的最终高度。