sass/scss为动画创建混合
问题描述:
嗨我有一些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');
我希望能够传递一个变量$距离,它可以动态改变元素从其滑入的距离。
在此先感谢。
答
编辑
我已经删除了使用指南针的引用,因为它不再受支持。如果您对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)'});
您是否想要将'$ distance' var从JS传递给SASS mixin? –
它不能在sass中完成吗?一切正常,但如果我想改变距离,即-100像素到-200像素为不同的元素,我将不得不再次写出整个CSS并给它一个新的类。我不知道是否可以通过sass传递距离变量?这样我可以有一个代码块,只是改变每个元素的距离? – craigb88
对不起,延迟回复。是的,你可以将一个变量传递给一个mixin,但据我所知,你不能将一个变量从JS传递给SASS。 –