2013-01-13 20 views
18

Czy to możliwe, aby korzystać z kompasu i Sass do wyjścia następujące przejścia CSS, który wyświetli wszystkie różne przedrostki oferenta:SASS/Kompas Przejścia

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

Czy ktoś może wskazać mi prawidłowej biblioteki?

+4

kompas rzeczywiście ma okropny dokumentację – Toskan

Odpowiedz

51

Zastosowanie compass' transition mixin:

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

oprócz przejścia połączonych Józefa, jeśli szukasz animacje, Eric Meyer ma wtyczki Compass [Animacja] (https: // github. com/ericam/compass-animate), która wymaga [Compass v0.13] (http://beta.compass-style.org/CHANGELOG/) (obecnie alpha) – steveax

+1

'@include transition (kolor 0.3s ułatwia wyjście , tło-kolor 0.3s łatwość-out); 'jeśli chcesz celować w określone style (co moim zdaniem jest szybsze) – Tisch

6

Mixin do tworzenia animacji przy użyciu pojedynczego lub "ALL" przejścia własności

@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; 
} 

wstawek do tworzenia animacji z wykorzystaniem wielu przejścia własności

@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

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

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