我該如何實現像jQuery的slideDown一樣的滑落效果，但只能使用CSS？

CSS3動畫有問題。他們不支持「自動」高度屬性（和寬度，邊距等）。在不知道元素的確切高度的情況下創建CSS3向下滑動動畫的最佳方式是什麼？我該如何實現像jQuery的slideDown一樣的滑落效果，但只能使用CSS？

這個問題類似於this之一，但接受的答案沒有回答實際問題，因爲它們沒有處理計算要滑動的元素高度的問題。

2011-10-06 Ron Reiter

我不確定你是否問完全相同的東西，但看看這個：http://stackoverflow.com/questions/5072526/css-3-equivalent-to-jquery -slideup-and-slidedown – thirtydot

@thirtydot，那裏沒有適當的解決方案。接近自動高度滑動問題的唯一解決方案是使用行高度動畫，該動畫看起來很糟糕，並且只與文本兼容。 –

@thirtydot另外，那裏接受的答案實際上並沒有解決問題。 –

你見過這個演示中，我對挖出：<div id="mydiv" style="height:0px">，使用此代碼找出它的高度（僅使用jQuery爲簡單起見）回答？ http://jsfiddle.net/XUjAH/6/

我試着寫我自己的，但它似乎沒有工作。

來源

2011-10-06 15:12:05 Blender

我希望有一個更穩定的解決方案，也許一些像這樣的jQuery插件：https://github.com/benbarnett/jQuery-Animate-Enhanced –

那麼，那個插件有什麼問題？ 'slideDown'只是'animate（{height：'toggle'}）;'。 – Blender

這是Ben的郵件，它的作者：嘿不幸的是，我不得不編寫一個函數來避免加速這些轉換，因爲它會導致一些奇怪的顯示問題。如果你看看這個函數：第354行的_isBoxShortcut（）： https://github.com/benbarnett/jQuery-Animate-Enhanced/blob/master/scripts/src/jquery.animate-enhanced.js# L354 我很想找到讓他們工作的方法。如果你想玩一玩，只需使該函數返回false，然後該插件會將所有的slideDown，SlideUp和slideToggle快捷方式轉換爲CSS3動畫。 –

-1

查看：http://jsfiddle.net/gion_13/eNR6Q/ 這只是css3動畫。在其他瀏覽器中使用更改/添加瀏覽器特定的供應商css前綴：「-moz」for firefox，「-webkit」for chrome & safari，「-o」用於歌劇，「-ms」用於ie

來源

2011-10-06 13:44:09

不是一個很好的答案，因爲它不處理自動高度。非常感謝 –

您可以知道通過複製元素的高度，將其高度設置爲「auto」並詢問其高度以像素爲單位。

之所以這樣說，是要進行動畫處理的DIV：

var divHeight = $("#mydiv").clone().css("height", "auto").height();

來源

2011-10-06 15:04:30 dutzi

嘿@dutzi，你爲什麼需要克隆它？爲什麼不設置自動高度並測量其高度？ –

由於某些瀏覽器可能會在將其更改爲「新」高度之前嘗試呈現該元素，導致其閃爍。你可以改變它的「顯示」爲「無」，但... – dutzi

我使用這個：

.slide-down { 
    transition: max-height .3s ease-out, opacity .3s ease-out, margin .3s ease-out; 
    overflow: hidden; 
    max-height: 100px; 

    &.collapsed { 
    max-height: 0; 
    opacity: 0; 
    margin: 0; 
    } 
}

你可能想，如果你使用較少或薩斯使用一個變量的作用持續時間和緩解。
要觸發效果，請使用 $('.slide-down').toggleClass('collapsed')。
如果100px對於您的容器太小，請在元素中使用額外的CSS類設置不同的最大高度。
如果您覺得花哨，請嘗試使用cubic-bezier(0.17, 0.04, 0.03, 0.94)而不是 ease-out。

來源

2015-02-17 16:52:12

我該如何實現像jQuery的slideDown一樣的滑落效果，但只能使用CSS？

回答

相關問題