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 as you can require an 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)'});

sass / scss 为动画创建 mixin

sass / scss create mixin for animations

sass

mixins

编辑