Question

我想做这样的事情：

.myTransitionableElement {
  transition: all .5s;

  .subChild { transition: all 1s }

  @include transitionKeyframes(
    start: {
      opacity: 0;
      transform: tranlsate(50px);

      .subChild {
        transform: rotate(45deg);
      }
    },
    end: {
      opacity: 1;
      transform: tranlsate(0);

      .subChild {
        transform: rotate(0);
      }
    }
  )
}


@mixin transitionKeyframes($args) {
  &.transitionStartKeyframe {
    @include map_get($args, "start");
  }
  &.transitionEndKeyframe {
    @include map_get($args, "end");
  }
}

最后应等于：

.myTransitionableElement {
  transition: all .5s;

  .subChild { transition: all 1s }

  &.transitionStartKeyframe {
    opacity: 0;
    transform: tranlsate(50px);

    .subChild {
      transform: rotate(45deg);
    }
  }
  &.transitionEndKeyframe {
    opacity: 1;
    transform: tranlsate(0);

    .subChild {
      transform: rotate(0);
    }
  }
}

其背后的原因是，我想找到一种方法，使我每次使用使用这些类的JS抽象时都不必记住那些类的名称。

Answer 1

您不能在SASS mixins中将不同的内容作为参数传递。以下是使用SASS可以实现的示例。您可以在此处指定要实现的目标吗？

contain()

Answer 2

您可以在这里尝试其他方法。在这个特定的例子中，我使用map为我保存数据。但是，如果属性和类名是固定的；您甚至可以简化它。

$map: (Start: (self: (opacity: '0', transform: 'tranlsate(50px)'), child: (transform: rotate(45deg))), End: (self: (opacity: '1', transform: 'tranlsate(0)'), child: (transform: rotate(0))));
$prefix: transition; $postfix: Keyframe;

@mixin transitionKeyframes($map) {
    @each $key, $val in $map {
    &.#{$prefix}#{$key}#{$postfix} {
      @each $attr, $prop in map-get($val, self) {
        #{$attr}: #{$prop};
      }

      .subChild {
        @each $attr, $prop in map-get($val, child) {
          #{$attr}: #{$prop};
        }
      }
    }
  }
}


.myTransitionableElement  {
  @include transitionKeyframes($map);
  transition: all .5s;
  .subChild { transition: all 1s }
}

将mixins用于重复性任务。如果您有很多变化，请修改mixin或$frames。将opacity和transistion细分为较小的mixin，并有条件地调用它们。

$prefix: transition; $postfix: Keyframe;
$frames: 'Start', 'End';
$opcity-main: ('Start': 0, 'End': 1);
$translate-main: ('Start': 50, 'End': 0);

@mixin transitionKeyframes($frame) {
    @each $key in $frame {
    &.#{$prefix}#{$key}#{$postfix} {
      $opacity: map-get($opcity-main, $key);
      $translate: map-get($translate-main, $key);
      opacity: $opacity;
      transform: tranlsate($translate + px);
    }
  }
}


.myTransitionableElement  {
  @include transitionKeyframes($frames);
  transition: all .5s;
  .subChild { transition: all 1s }
}

如何将多个内容块作为参数传递给mixin？

2 个答案: