Как преобразовать это меньше в sass? - PullRequest
Новая
       5

Как преобразовать это меньше в sass?

0 голосов
/ 17 сентября 2018

Это из файла .less, который поставляется с пакетом npm rc-slider (React Slider) https://github.com/react-component/slider/blob/master/src/Range.jsx

Примеры слайдера: http://react -component.github.io /слайдер / examples / range.html

Ошибка

205 |. @ {className} -enter,. @ {className} -apparar {

enter image description here

.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);
  }
}

1 Ответ

0 голосов
/ 17 сентября 2018

Ах, я заставил это работать, пока только некоторые незначительные ошибки в соглашении об именах, но теперь он не нарушается:) 

@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);
  }
}
...