html - 当外部 div 宽度动画为 0px 时保留内部 div 宽度

Question

我有这样的情况:http://jsfiddle.net/hLzfr06j/3/

<div class="outer col-xs-12 col-sm-6 col-md-4 col-lg-3">
    <div class="inner">
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
        Sed posuere interdum sem. Quisque ligula eros ullamcorper quis,
        lacinia quis facilisis sed sapien. Mauris varius diam vitae arcu.
        Sed arcu lectus auctor vitae, consectetuer et venenatis eget velit.
    </div>
</div>

我想将外部 div 设置为 width: 0px; 的动画，以便内部 div 的内容保持其宽度并且不会像在 fiddle 中那样在动画期间被向下推。

编辑:在动画期间应隐藏内部 div 内容的溢出部分。

编辑:让动画变成这样:

Answer 1

您需要做的就是在更改外部 div 的宽度之前设置内部 div 的宽度:

function slide() {
    var currentWidth = $(".inner").width();
    $(".inner").width(currentWidth);
    $(".outer").addClass("collapsed");
}
function slideBack() {

    $(".outer").removeClass("collapsed");

    setTimeout(function() {
        $(".inner").width("auto");
    }, 350);
}

在向后滑动时，我还添加了一个等于过渡持续时间的超时，这样它就不会在外部 div 仍在更改过程中时闪烁。

div.outer {
    padding: 0;//add
    overflow: hidden; //add

    margin: 20px;
    -webkit-transition: width 350ms ease-in-out;
    -moz-transition: width 350ms ease-in-out;
    -o-transition: width 350ms ease-in-out;
    -ms-transition: width 350ms ease-in-out;
    transition: width 350ms ease-in-out;
}

您还需要添加 overflow 属性并确保外部 div 没有填充。

https://jsfiddle.net/reesewill/fb1sj7zz/