如何将其减少为无礼呢？

Question

这来自npm软件包rc-slider（React Slider）https://github.com/react-component/slider/blob/master/src/Range.jsx

随附的.less文件

滑块的示例：http://react-component.github.io/slider/examples/range.html

错误

  

205 | 。@ {className}-输入，。@ {className}-出现{

.motion-common() {
  animation-duration: .3s;
  animation-fill-mode: both;
  display: block !important;
}

.make-motion(@className, @keyframeName) {
  .@{className}-enter, .@{className}-appear {
    .motion-common();
    animation-play-state: paused;
  }
  .@{className}-leave {
    .motion-common();
    animation-play-state: paused;
  }
  .@{className}-enter.@{className}-enter-active, .@{className}-appear.@{className}-appear-active {
    animation-name: ~"@{keyframeName}In";
    animation-play-state: running;
  }
  .@{className}-leave.@{className}-leave-active {
    animation-name: ~"@{keyframeName}Out";
    animation-play-state: running;
  }
}
.zoom-motion(@className, @keyframeName) {
  .make-motion(@className, @keyframeName);
  .@{className}-enter, .@{className}-appear {
    transform: scale(0, 0); // need this by yiminghe
    animation-timing-function: @ease-out-quint;
  }
  .@{className}-leave {
    animation-timing-function: @ease-in-quint;
  }
}
.zoom-motion(rc-slider-tooltip-zoom-down, rcSliderTooltipZoomDown);

@keyframes rcSliderTooltipZoomDownIn {
  0% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(0, 0);
  }
  100% {
    transform-origin: 50% 100%;
    transform: scale(1, 1);
  }
}

@keyframes rcSliderTooltipZoomDownOut {
  0% {
    transform-origin: 50% 100%;
    transform: scale(1, 1);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(0, 0);
  }
}

Answer 1

啊，我使它起作用了，到目前为止，在命名约定上只有一些细微的皮棉错误，但现在还没有打破：）

@motion-common() {
  animation-duration: .3s;
  animation-fill-mode: both;
  display: block !important;
}

@make-motion($className, $keyframeName) {
  $className {
    &-enter, &-appear {
      @motion-common();
      animation-play-state: paused;
    }
    &-leave {
      @motion-common();
      animation-play-state: paused;
    }

    &-enter.&-enter-active,
    &-appear.&-appear-active {
      animation-name: ~"${keyframeName}In";
      animation-play-state: running;
    }

    &-leave.&-leave-active {
      animation-name: ~"${keyframeName}Out";
      animation-play-state: running;
    }
  }
}

@zoom-motion($className, $keyframeName) {
  @make-motion($className, $keyframeName);

  $className {
    &-enter, &-appear {
      transform: scale(0, 0); // need this by yiminghe
      animation-timing-function: $ease-out-quint;
    }
    &-leave {
      animation-timing-function: $ease-in-quint;
    }
  }
}

@zoom-motion(rc-slider-tooltip-zoom-down, rcSliderTooltipZoomDown);

@keyframes rcSliderTooltipZoomDownIn {
  0% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(0, 0);
  }
  100% {
    transform-origin: 50% 100%;
    transform: scale(1, 1);
  }
}

@keyframes rcSliderTooltipZoomDownOut {
  0% {
    transform-origin: 50% 100%;
    transform: scale(1, 1);
  }
  100% {
    opacity: 0;
    transform-origin: 50% 100%;
    transform: scale(0, 0);
  }
}