嗨我有一些CSS和JS代码来创建一个有效的幻灯片，当用户向下滚动页面并且元素进入视图时。我只是想知道是否有人能够帮助解释我将如何创建一个mixin来让价值发生变化。sass/scss为动画创建混合

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

我希望能够传递一个变量$距离，它可以动态改变元素从其滑入的距离。

在此先感谢。

来源

2017-04-18 craigb88

您是否想要将'$ distance' var从JS传递给SASS mixin？ –

它不能在sass中完成吗？一切正常，但如果我想改变距离，即-100像素到-200像素为不同的元素，我将不得不再次写出整个CSS并给它一个新的类。我不知道是否可以通过sass传递距离变量？这样我可以有一个代码块，只是改变每个元素的距离？ – craigb88

对不起，延迟回复。是的，你可以将一个变量传递给一个mixin，但据我所知，你不能将一个变量从JS传递给SASS。 –

编辑

我已经删除了使用指南针的引用，因为它不再受支持。如果您对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)'});

来源

2017-04-20 14:47:49

还没有尝试过，但会回家的时候。它看起来像我希望的那种事情。没有必要这样做我是JS，我只是像你一样在div上传递距离。谢谢，一旦我尝试过，我会批准评论。 – craigb88

忘了回复，但这工作完美。我使用gulp autoprefixer而不是指南针，但是可以工作。谢谢 – craigb88

sass/scss为动画创建混合

回答

编辑

相关问题