2013-01-13 51 views
18

是否可以使用羅盤或SASS輸出下面的CSS過渡,將輸出的所有不同的供應商前綴:SASS /北斗轉換

-webkit-transition: all 0.3s ease-in-out; 

任何人都可以點我到正確的庫?

+4

指南針確實有一個可怕的文檔 – Toskan

回答

51

使用compass' transition mixin

@include transition(all 0.3s ease-in-out); 
+1

除了由約瑟夫鏈接的轉換,如果你正在尋找動畫,埃裏克邁耶有一個[指南針動畫插件(https://開頭github上。 com/ericam/compass-animate)需要[Compass v0.13](http://beta.compass-style.org/CHANGELOG/)(目前爲alpha) – steveax

+1

'@include transition(color 0.3s ease-in-out ,背景顏色0.3s緩出);'如果你想要定位特定的樣式(我相信它更快) – Tisch

6

密新使用創建動畫單或 「全部」 財產轉移

@include transition(PROPERTY DURATION DELAY(OPT) TIMING-FUNCTION) 
@mixin transition($transition) { 
    -webkit-transition: $transition; 
    -moz-transition: $transition; 
     -ms-transition: $transition; 
     -o-transition: $transition; 
      transition: $transition; 
} 

密新使用多個屬性轉變

@include multi-transition("PROPERTY DURATION DELAY(OPT) TIMING-FUNCTION, PROPERTY DURATION DELAY(OPT) TIMING-FUNCTION") 
@mixin multi-transition($transition) { 
-webkit-transition: #{$transition}; 
    -moz-transition: #{$transition}; 
    -ms-transition: #{$transition}; 
     -o-transition: #{$transition}; 
     transition: #{$transition}; 
} 
創建動畫
0

SASS密新

@mixin transition($transition){ 
    -webkit-transition: $transition; 
    -moz-transition: $transition; 
    -o-transition: $transition; 
    transition: $transition; 
} 

@include transition(all 0.3s ease-in-out);