sass/scss爲動畫創建混合

Question

嗨我有一些CSS和JS代碼來創建一個有效的幻燈片，當用戶向下滾動頁面並且元素進入視圖時。我只是想知道是否有人能夠幫助解釋我將如何創建一個mixin來讓價值發生變化。

我的HTML元素會是這樣

<div class="animation-element slide-left"></div> 

我現在的CSS是這樣的

.animation-element { 
    opacity: 0; 
    position: relative; 
} 

.animation-element.slide-left { 
    opacity: 0; 
    -moz-transition: all 500ms linear; 
    -webkit-transition: all 500ms linear; 
    -o-transition: all 500ms linear; 
    transition: all 500ms linear; 
    -moz-transform: translate3d(-100px, 0px, 0px); 
    -webkit-transform: translate3d(-100px, 0px, 0px); 
    -o-transform: translate(-100px, 0px); 
    -ms-transform: translate(-100px, 0px); 
    transform: translate3d(-100px, 0px, 0px); 
} 

.animation-element.slide-left.in-view { 
    opacity: 1; 
    -moz-transform: translate3d(0px, 0px, 0px); 
    -webkit-transform: translate3d(0px, 0px, 0px); 
    -o-transform: translate(0px, 0px); 
    -ms-transform: translate(0px, 0px); 
    transform: translate3d(0px, 0px, 0px); 
} 

我的JS是

var $animation_elements = $('.animation-element'); 
var $window = $(window); 

function check_if_in_view() { 
    var window_height = $window.height(); 
    var window_top_position = $window.scrollTop(); 
    var window_bottom_position = (window_top_position + window_height); 

    $.each($animation_elements, function() { 
    var $element = $(this); 
    var element_height = $element.outerHeight(); 
    var element_top_position = $element.offset().top; 
    var element_bottom_position = (element_top_position + element_height); 

    //check to see if this current container is within viewport 
    if ((element_bottom_position >= window_top_position) && 
     (element_top_position <= window_bottom_position)) { 
     $element.addClass('in-view'); 
    } else { 
     $element.removeClass('in-view'); 
    } 
    }); 
} 

$window.on('scroll resize', check_if_in_view); 
$window.trigger('scroll'); 

我希望能夠傳遞一個變量$距離，它可以動態改變元素從其滑入的距離。

在此先感謝。

Answer 1

編輯

我已經刪除了使用指南針的引用，因爲它不再受支持。如果您對SASS的自動前綴感興趣，請使用PostCss，因爲您可能需要使用autoprefixer插件。

---

您可以將變量傳遞給SASS中的mixins。但是，正如我在我的評論中提到的，我不知道通過JS將變量傳遞給SASS的方法。

@mixin my-animation($distance) { 
    opacity: 0; 
    transition: all 500ms linear; 
    transform: translate3d($distance, 0, 0); 
} 

div { 
    @include my-animation(-100px); 
} 

我確實推薦使用 Compass。如果您導入Compass， @import 'compass';，並使用 @include transform(..);它將自動爲轉換屬性添加前綴，以便您不需要編寫幾行代碼。

如果要使用JS修改distance值，可以使用JS添加內聯樣式，並使用包含自定義distance值的transform屬性。

$('.your-element').css({'transform': 'translate3d('+distance+', 0, 0)'});