sass/scss create mixin für Animationen

Question

Hallo Ich habe etwas CSS und JS-Code, um eine Folie im Effekt zu erstellen, wenn ein Benutzer die Seite herunterscrollt und das Element in Sicht kommt. Ich habe mich nur gefragt, ob jemand helfen könnte zu erklären, wie ich ein Mixin erstellen würde, damit sich der Wert ändern kann.

Mein HTML-Element wie dies

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

Mein aktueller CSS ist dieser

.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); 
} 

Mein JS ist

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'); 

Ich möchte in der Lage sein, eine Variable übergibt

wäre $ distance, die dynamisch sein würde, um die 100/Entfernung zu ändern, von der das Element abgleitet.

Vielen Dank im Voraus.

Answer 1

bearbeiten

ich den Hinweis auf die Verwendung Compass entfernt haben, wie es wird nicht mehr unterstützt. Wenn Sie an einem automatischen Präfix für SASS interessiert sind, schauen Sie sich PostCss an, da Sie ein autoprefixer Plugin benötigen.

---

Sie können Variablen an Mixins in SASS übergeben. Wie ich jedoch in meinem Kommentar erwähnt habe, ist mir keine Möglichkeit bekannt, eine Variable über JS an SASS zu übergeben.

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

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

Ich empfehle Compass verwenden. Wenn Sie Compass, @import 'compass';, importieren und @include transform(..); verwenden, wird die Transformeigenschaft für Sie automatisch mit einem Präfix versehen, damit Sie nicht ein paar Zeilen Code schreiben müssen.

Wenn Sie JS verwenden, um den distance Wert zu ändern, könnten Sie JS verwenden einen Inline-Stil mit der transform-Eigenschaft Sie wollen mit Ihrem benutzerdefinierten distance Wert hinzuzufügen.