編寫CSS轉換的最簡潔方法

Question

是否有更簡潔的方法來編寫以下代碼？

element{
    transition: all 700ms linear,
        transform 700ms cubic-bezier(0.4, 0.25, 0.14, 1.5),
        background 700ms cubic-bezier(0.4, 0.25, 0.14, 1.5);
}

我要做的是將不同的轉換計時功能應用於轉換和背景屬性，而對其余屬性使用線性轉換計時功能。 這是正常的，但我試圖盡可能保持干燥 。

Answer 1

你在這里做的並不多。 您可以單獨指定轉換持續時間：

element{
    transition: all linear,
        transform cubic-bezier(0.4, 0.25, 0.14, 1.5),
        background cubic-bezier(0.4, 0.25, 0.14, 1.5);
    transition-duration: 700ms;
}

但那是關於它的。 由於逗號分隔的轉換值的工作方式，您無法僅指定一次自定義曲線。 整個值列表按指定順序重復，而不是無限重復最后一個值。

也就是說，如果你這樣做：

element{
    transition-property: all, transform, background;
    transition-duration: 700ms;
    transition-timing-function: linear, cubic-bezier(0.4, 0.25, 0.14, 1.5);
}

發生的情況是， transition-timing-function的缺失值填充為linear ，而不是自定義曲線。 結果與您預期的background轉換不符。

如果您嘗試通過更改過渡屬性的順序來利用這一點，那么background的缺失值將取代您的自定義曲線：

element{
    transition-property: transform, all, background;
    transition-duration: 700ms;
    transition-timing-function: cubic-bezier(0.4, 0.25, 0.14, 1.5), linear;
}

會發生的是，即使您單獨指定了轉換， all轉換也將覆蓋 transform轉換，因為all后來包含任何先前列出的屬性。

Answer 2

好吧，最干的方法是使用類似SASS的東西並編寫一個mixin，然后使用它而不是復制粘貼到處的代碼。 我要做的另一個建議是避免使用all ，而是通過線性轉換枚舉你想要設置動畫的屬性。 雖然這可能更加冗長，但我願意打賭它會更加高效，特別是如果你曾經將像box-shadow一樣的圖形要求的東西放入元素的風格中。

因此，雖然您的方式可行，但我覺得您擁有的過渡更獨特，此配方變得越有價值：

element {
    transition-duration: 2s;
    transition-property: all, background, transform;
    transition-timing-function: linear, cubic-bezier(0.4, 0.25, 0.14, 1.5), cubic-bezier(0.4, 0.25, 0.14, 1.5);
}

當然，我建議枚舉屬性，以避免昂貴和未經請求的動畫。 在這種情況下，這樣的事情更有意義：

element {
    transition-duration: 2s;
    transition-property: height, background, transform, width;
    transition-timing-function: linear, cubic-bezier(0.4, 0.25, 0.14, 1.5), cubic-bezier(0.4, 0.25, 0.14,1.5), linear;
}

編輯：正如@BoltClock所提到的，我對這個粗體文本下面的所有內容都錯了，所以請忽略它。 逗號分隔的參數再次按照它們最初指定的順序應用 - 既不是第一次也不是最后一次重復transition-property值。 我仍然認為我所說的不使用all內容對於性能和未來證明的范圍來說是重要的建議！

請注意我如何排序參數：如果transition-property參數多於transition-timing-function ，則所有額外屬性將默認為transition-property列出的第一個值作為其默認值。 因此，首先放置一個linear （默認）值，然后枚舉所有獨特的計時函數以匹配正確的屬性，然后您修改到最后的任何屬性（如width ）將自動默認為linear ！ 因此，即使您在屬性列表的末尾添加了5個屬性，只有background和transform將具有其獨特的cubic-bezier定時函數。 例如：

element {
    transition-duration: 2s;
    transition-property: height, background, transform, width, oneProp, twoProp, threeProp, etcProp;
    transition-timing-function: linear, cubic-bezier(0.4, 0.25, 0.14, 1.5), cubic-bezier(0.4, 0.25, 0.14,1.5);
}

上面的所有內容都使用除background和transform之外的linear定時功能。 我覺得這是性能和DRY CSS之間的良好折衷。 我為你制作了一個jsFiddle來查看各種選項 - 注釋掉不同的CSS來嘗試各種方式：

http://jsfiddle.net/530cumas/4/

Answer 3

就我的CSS知識而言（在快速谷歌之后），您當前的方法是最短的（因此，最“干”）方式來做你想要的。 當然，我不是CSS大師，所以我可能完全錯了。