Question

我尝试从SASS迁移到Stylus，但我发现很难将以下代码从SASS转换为手写笔：

$height : 30;
@-webkit-keyframes giene {
  @for $i from 1 through 50 {
    $percent: 0% + $i;
    $shrink: 1+$i/5;
    #{$percent} {
      -webkit-transform: matrix3d(
        1,0,0,0, 
        0,1,0, (1-$shrink) /$height, 
        0,0,1,0, 
        0,0,0,$shrink
      );
    }  
  }
  99% {
    -webkit-transform: matrix3d(
      1,   0,  0, 0, 
      0 ,  1,  0, -10/$height,
      0,   0,  1, 0, 
      0,   0,  0, 100
    );
    opacity:1;
  }
  100%{
    opacity:0;
  }
}
.giene {
  -webkit-animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  -webkit-animation-name:giene;
  -webkit-transform-origin: 75% 0;
  -webkit-perspective: 0;  
}
div{
  background:blue;
  border-radius:4px;
  width:120px;
  height: #{$height}px;
  color:white;
  font-family:Verdana;
}

（可在此处查看：http://codepen.io/anon/pen/ApHkc）

我遇到的主要问题是定义一个for循环，创建％1，...，％50个关键帧，即使是非常简单的

示例

@-webkit-keyframes giene
  for i in (1..50)
    p = 0% + i
    {p} : {
      color: red;
    }

我得到解析错误声称＆＃34; outdent＆＃34;预期而不是＆＃34;对于＆＃34;。

Answer 1

要小心Codepen，因为针对最近针对关键帧中的循环问题修复了手写笔中的错误。也许Codepen仍然没有将手写笔更新到0.44版本。检查此github问题https://github.com/LearnBoost/stylus/issues/1443

无论如何，手写笔你要找的代码是：

$height=30
@-webkit-keyframes giene
  for $i in (1)..(50)
    $percent = 0% + $i
    $shrink = 1 + $i / 5
    {$percent}
      -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, (1 - $shrink) / $height, 0, 0, 1, 0, 0, 0, 0, $shrink)
  99%
    -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, -10 / $height, 0, 0, 1, 0, 0, 0, 0, 100)
    opacity: 1
  100%
    opacity: 0
.giene
  -webkit-animation-duration: 1s
  -webkit-animation-fill-mode: both
  -webkit-animation-name: giene
  -webkit-transform-origin: 75% 0
  -webkit-perspective: 0
div
  background: blue
  border-radius: 4px
  width: 120px
  height: $height px
  color: white
  font-family: Verdana

如何使用手写笔生成多个帧？

1 个答案: