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

Question

当我将它与 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' })};

在样式组件中使用时，转换中的某些内容无法很好地传输，我不知道什么不起作用

使用我在下面编写的准备好的示例将动画应用到 div，并查看不同之处：

scss 示例：

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)

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

Scss mixin border animation doesn't work in the same way in styled component, in react, why?

sass

reactjs

styled-components