從左側滑入寬度：自動

我正在使用彈性盒實現工具欄，並希望可選部分通過從左側平滑地滑入來顯示。從左側滑入寬度：自動

一開始，酒吧應該看起來像是新的元素根本不存在，並在最後彷彿動畫從來沒有發生過

動畫0% { margin-left: -<width> }工程完全按照預期，但只有當元素的寬度在那個時候是已知的;我需要它與width: auto（即未設定的寬度）或其他非長度（如彎曲時）一起使用。

@keyframes appear { 
 
    0% { margin-left: -30ch; } 
 
} 
 
div.a { 
 
    width: 30ch; /* << should work without that */ 
 
    flex: none; /* << stretch: should work with flex */ 
 
    animation: appear 1s ease-in-out infinite alternate; 
 
} 
 

 
.root { 
 
    margin: 10px; 
 
    border: 1px solid black; 
 
    display: flex; 
 
    overflow: hidden; 
 
} 
 
.a, .b, .c { 
 
    box-sizing: border-box; 
 
    padding: 5px; 
 
    flex: 1; 
 
} 
 
.b { flex: 2 } 
 
.a { background: #88f } 
 
.b { background: #8d8 } 
 
.c { background: #f88 }

<div class="root"> 
 
    <div class="a">Some new stuff</div> 
 
    <div class="b">Hello</div> 
 
    <div class="c">World</div> 
 
</div> 
 

 
<div class="root"> 
 
    <div class="a">Some longer content sliding in</div> 
 
    <div class="b">Hello</div> 
 
    <div class="c">World</div> 
 
</div>

來源

2015-09-25 pascal

Width:auto;不能設置動畫。使用max-width:1000px;或者比寬度更大的東西。因此，代碼是：

width:auto; 
max-width:1000px;

來源

2015-09-26 00:31:56

動畫的經驗將會對這種極端的寬度幾乎沒有可調整的 - 因爲你只能看到來自>部分動畫到1000像素（可即：（最後一個）100像素（ 1000）希望你明白了） –

對寬度進行動畫製作會產生「滾出」效果，而不是「滑出」效果，而這種「滑出效果」會對邊距進行動畫處理。（我現在已經回到了這一點，使用線性插值可以;而'max-width：100％'也可以，但我希望片段中的幻燈片效果） – pascal

從左側滑入寬度：自動

回答

相關問題