Scss mixin 边框 animation 在样式组件中的工作方式不同，在反应中，为什么？

Question

当我将 animation 与 scss 一起使用时，它可以工作，如下所示：

@mixin magicBorder($width, $color, $duration, $direction){
  position:relative;
    &:before{
      content:'';
      position:absolute;
      width:calc(100% + #{$width * 2});
      height:calc(100% + #{$width * 2});
      top:calc(#{$width}/-1);
      left:calc(#{$width}/-1);
      background:linear-gradient(to right, $color 0%, $color 100%), linear-gradient(to top, $color 50%, transparent 50%), linear-gradient(to top, $color 50%, transparent 50%), linear-gradient(to right, $color 0%, $color 100%), linear-gradient(to left, $color 0%, $color 100%);
      background-size: 65% $width, $width 200%, $width  200%, 0% $width, 0% $width;
      background-position: -150% 100%, 0% 0%, 100% 0%, 100% 0%, 0% 0%;
      background-repeat:no-repeat, no-repeat;
      transition:transform $duration ease-in-out, background-position $duration ease-in-out, background-size $duration ease-in-out;
      transform:scaleX(0) rotate(180deg * $direction);
      transition-delay:$duration*2, $duration, 0s;
    }
    &:hover{
      &:before{
        background-size:200% $width, $width 400%, $width 400%, 55% $width, 55% $width;
        background-position:50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
        transform:scaleX(1) rotate(180deg * $direction);
        transition-delay:0s, $duration, $duration*2;
      }
    }
}

@include magicBorder(2px, red, 1s, 1);

但是当我尝试在样式组件中实现它时它不起作用，就像这样

 const MagicBorder = ({ width, color, duration, direction }) => css`
position: relative;
&:before {  
position: absolute;  
content: "";
  width: calc(100% + ${width} * 8);
  height: calc(100% + ${width} * 2);
  top: calc(${width} / -10);
  left: calc(${width} / -1);
  background: linear-gradient(to right, ${color} 0%, ${color} 100%),
    linear-gradient(to top, ${color} 50%, transparent 50%),
    linear-gradient(to top, ${color} 50%, transparent 50%),
    linear-gradient(to right, ${color} 0%, ${color} 100%),
    linear-gradient(to left, ${color} 0%, ${color} 100%);
  background-size: 65% ${width}, ${width} 200%, ${width} 200%, 0% ${width}, 0% ${width};
  background-position: -150% 100%, 0% 0%, 100% 0%, 100% 0%, 0% 0%;
  background-repeat: no-repeat;
  transition: transform ${duration} ease-in-out,
  background-position ${duration} ease-in-out,
  background-size ${duration} ease-in-out;
  transform: scaleX(0) rotate(180deg * ${direction});
  transition-delay: ${duration}*2, ${duration}, 0s;
}
  &:hover {
    &:before {
    background-size: 200% ${width}, ${width} 400%, ${width} 400%, 55% ${width}, 55% ${width};
    background-position: 50% 100%, 0% 100%, 100% 100%, 100% 0%, 0% 0%;
    transform: scaleX(1) rotate(180deg * ${direction});
    transition-delay: 0s, ${duration}, ${duration} * 2;
    }
  } 
`;

    ${MagicBorder({ width: '3px', color: 'rgba(121, 214, 250, 0.9)', duration: '1s', direction: '1' })};

在样式化组件中使用时，过渡中的某些东西不能很好地转移，我不知道什么不起作用

使用我在下面编写的准备好的示例将 animation 应用于 div，并查看差异：

scs示例：

style {
 .magic-border {
   height: 50px;
   width: 300px;
   @include magicBorder(2px, red, 0.3s, 0);
}

<div class="magic-border></div>

样式组件示例：

const StyledDiv = styled.div`
  height: 50px;
  width: 300px;
    ${MagicBorder({ width: '3px', color: 'rgba(121, 214, 250, 0.9)', duration: '1s', direction: '1' })};
`
<StyledDiv></StyledDiv>

任何帮助都会很棒:)！ `

Answer 1

我认为您只是忘记在calc中包含转换持续时间计算，例如

${duration} * 2  

应该

calc(${duration}*2)