保留內格寬度時，外層div寬度動畫爲0px

我有這樣的情況：http://jsfiddle.net/hLzfr06j/3/保留內格寬度時，外層div寬度動畫爲0px

<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>

我要外格動畫，以width: 0px;以便內部div的內容保存它的寬度和在動畫中不像小提琴那樣被按下。

編輯：內部div內容的溢出部分應該在動畫過程中隱藏。

編輯：所以動畫是這樣的：

enter image description here

來源

2015-03-13 Ipa

事情是這樣的[的jsfiddle（http://jsfiddle.net/dowomentfart/hLzfr06j/13/） – dowomenfart 2015-03-13 13:53:27

不是真的，看圖片的描述。 – Ipa 2015-03-13 14:17:36

爲什麼不使用絕對位置，並且當新類添加到文本上時，將其右移100％，而不是縮小它 – jsg 2015-03-13 14:49:39

所有你需要做的是設置內部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; 
}

您還需要添加溢出屬性，並確保沒有填充到外部div。

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

來源

2015-03-16 07:32:24

保留內格寬度時，外層div寬度動畫爲0px

回答

相關問題