Question

我从max-width: 0过渡到max-width: 100%。如果我在white-space: nowrap div上添加.caption-wrap，则效果很好。但是，然后我必须在过渡后删除此空白以使其响应。我可以使用transitionend事件，但这不是唯一的问题。

如果我添加white-space: nowrap;，则当过渡运行时文本不适合文本时，过渡期间将不会自动换行。

是否可以更改标记/ CSS以使其正常工作？我想我在position: absolute上没有.caption-wrap，因为我需要在此元素上留出空白，并且需要将多个字幕叠加在一起。

$('#add').click(function(e) {
  e.preventDefault();
  $('.caption-wrap').addClass('caption-shown')
});

$('#remove').click(function(e) {
  e.preventDefault();
  $('.caption-wrap').removeClass('caption-shown')
});

.caption-wrap {
  position: relative;
  max-width: 0;
  left: 0;
  float: left;
  clear: left;
  overflow: hidden;
  transition: all 1000ms ease-out;
  font-size: 30px;
}

.caption-shown {
  max-width: 100%;
}

#add {
  position: absolute;
  left: 0;
  bottom: 0;
}

#remove {
  position: absolute;
  left: 100px;
  bottom: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="caption-wrap">
  <div class="caption">Class aptent taciti sociosqu ad litora torquent per conubia nostra</div>
</div>

<a href="#" id="add">add class</a>
<a href="#" id="remove">remove class</a>

CSS过渡最大宽度和空白

0 个答案: