2012-07-13 36 views
18

Làm cách nào để thực hiện nhiều chuyển đổi css như thế này Jsfiddle với Compass?La bàn nhiều chuyển đổi css

Điều tôi đang cố gắng thực hiện là viết mã này bên dưới bằng La bàn.

-webkit-transition: top 0.3s ease-out, background .9s .5s ease-out; 
    -moz-transition: top 0.3s ease-out, background .9s .5s ease-out; 
    -o-transition: top 0.3s ease-out, background .9s .5s ease-out; 
     transition: top 0.3s ease-out, background .9s .5s ease-out; 

Trả lời

48

Đây có phải là những gì bạn đang tìm kiếm không? http://compass-style.org/reference/compass/css3/transition/#mixin-transition

@include transition(top 0.3s ease-out, background .9s .5s ease-out);

+3

Điều này vẫn có hiệu quả với bạn? Tôi đã nghĩ ra điều đó là tốt, nhưng những gì tôi nhận được là 'quá trình chuyển đổi: trên nền tảng dễ dàng 0.3s .9s .5s. Easy-out; '. Nó để lại dấu phẩy ra! Đây có phải là một lỗi được biết đến? [Đang sử dụng 'la bàn 0.13.alpha.12'] – MMachinegun

+0

@marczking không chắc chắn nếu https://github.com/Igosuki/compass-mixins/issues/34 có liên quan. nó hoạt động đối với tôi nếu tôi chuyển vào danh sách: '@include transition ((giảm 0,3 hàng đầu), (giảm 0,9 giây nền)); – chemoish

-3

Nếu bạn đang sử dụng một mixin để xác định bạn chuyển đổi và bạn nhận được lỗi này:

error: mixin transition only takes 1 arguments; given 2

thử kèm theo giá trị của bạn giữa ngoặc như:

@include transition((bottom .5s, background 2s)); 
+0

Câu hỏi này dành riêng cho Compass, cung cấp một mixin chuyển tiếp không tạo ra lỗi này. – cimmanon

-1

Từ tài liệu:
http://compass-style.org/reference/compass/css3/transition/#mixin-transition

Nó có thể đã thay đổi trong những năm qua nhưng bây giờ nó là như thế này:

single-transition($property, $duration, $function, $delay) 

Thông báo các $ chậm trễ này là cuối cùng, chứ không phải như trong câu trả lời đúng nó ở đâu trước khi cuối cùng.

Các vấn đề liên quan