当外部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的内容保留它的宽度，并且在动画期间不会像在小提琴中那样向下推。

编辑：在动画过程中，应隐藏内部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/