如何使用CSS和Jquery在显示另一个可变宽度的div时将div滑过？

Question

​

$('#div-1').click(function() {
    if ($('#div-2').hasClass('shown')) {
    $(this).css('left', 0);
    $('#div-2').removeClass('shown');
  } else {
    // $('#div-2').css('width', 'auto');
    $('#div-2').addClass('shown');
    $(this).css('left', $('#div-2').width());
    
  }
})

#div-1 {
  background-color: red;
  position: absolute;
  width: 25%;
  min-height: 100vh;
  transition: 0.5s;
  left: 0;
  top: 0;
  z-index: 1;
}

#div-2 {
  background-color: blue;
  position: absolute;
  max-width: 0;
  min-height: 100vh;
  transition: 0.5s;
  left: 0;
  top: 0;
  overflow: hidden;
}

.shown {
  min-width: 25% !important;
  max-width: 500px !important;
  transition: 0.5s;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="div-1"></div>
<div id="div-2">
  <p>I want all this text to show up and it could be any length...</p>
</div>

​

我有两个div，其中一个是隐藏的(宽度为0，不是隐藏显示)。当你点击另一个div时，我需要隐藏的div滑出，并将click div推到需要推的地方。隐藏的div包含长度可变的文本。实际上，我希望将隐藏的div的宽度从0更改为auto，并将单击div向右移动这个新的值。我知道你不能动画auto，所以我一直在使用显示here的max-width技巧。

我的问题是，click div似乎滑到了隐藏div的新min-width，而不是它的实际宽度。这里有一个棘手的问题：https://jsfiddle.net/tjfhzvd9/1/。单击该小提琴中的红色框可查看此操作不起作用的原因。我想让div滑动到它需要的程度，但不能更远。

我也尝试过用Jquery.animate()来做这件事，但也不起作用。非常感谢您的帮助。

Answer 1

这是一个纯css解决方案：

HTML：

<div id="container">
  <div id="div-2">
    <p>I want all this text to show up ...</p>
  </div>
  <div id="div-1"></div>
</div>

CSS：

#container {
  display: flex;
  flex-direction: row;
}
#div-1 {
  background-color: red;
  width: 25%;
  min-height: 100vh;
}

#div-2 {
  background-color: blue;
  width: auto;
  max-width: 0;
  transition: max-width 1s ease;
  overflow: hidden;
}

.shown {
  max-width: 75% !important;
}

JS：

$('#div-1').click(function() {
    $('#div-2').toggleClass('shown');
})

CSS解决方案运行良好，但您可能会注意到不想要的文本渲染效果。这是因为在动画周期中，段落不断地调整其宽度以适应父容器的宽度。在运行主动画循环之前，我们应该在段落上设置固定的宽度：

var div2MaxWidth = 0;

// Get div2 max width

$('#div-2').css({
  transitionDuration: '0s',
  maxWidth: '75%', // <=== 100% - red.width
  position: 'absolute',
  visibility: 'hidden'
});

div2MaxWidth = $('#div-2').width();

$('#div-2').css({
  maxWidth: '0',
  position: 'static',
  visibility: 'visible'
});

// Set fixed width to the paragraph inside div2 and restore transition's duration

$('#div-2 > p').width(div2MaxWidth + 'px');
$('#div-2').css('transitionDuration', '1s');


$('#div-1').click(function() {
    $('#div-2').toggleClass('shown');
})