sass / scss 为动画创建 mixin

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(..);，它将自动为转换属性添加前缀，这样您也无需编写几行代码。

如果您想使用 JS 修改 distance 值，您可以使用 JS 添加一个内联样式，其中包含您想要的转换属性，包括您的自定义 distance 值。

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