修改

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

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

提前致谢。

Answer 1

修改

我已删除了使用Compass的引用，因为它不再受支持。如果您对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(..);，它将自动为transform属性添加前缀，以便您免于编写几行代码。~~

如果您想使用JS修改distance值，您可以使用JS添加带有所需转换属性的内联样式，包括自定义distance值。

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

sass / scss为动画创建mixin

1 个答案:

修改