stylus定义的方法传参怎样才能不按照顺序?

发布于 2022-09-04 17:32:23 字数 1118 浏览 10 评论 0

今天用stylus写css的时候想定义了一个可以复用的方法,这个方法主要是设置css3的旋转动画效果,虽然能满足需求,但是总觉得传参太啰嗦,要是可以传想要的就好了,有什么好的建议呢?

//定义旋转方法
transformRotate(origin=center,name=icon-rotate,duration=5s,timfn=linear,delay=0s,count=1,direction=normal,fillmode=forwards){
  transform-origin:origin;
   animation-name: name;
   animation-duration: duration;
   animation-timing-function: timfn;
   animation-delay: delay;
   animation-iteration-count: count; // n | infinite
   animation-direction: direction;
   animation-fill-mode: fillmode;
}
//刷新按钮
.btn-refresh {
    &:hover .dijitIcon{
      transformRotate(center,icon-rotate,5s,linear,0s,infinite);
    }
}
//grid“设置”
.field-lkrowno {
  &:hover .dgrid-resize-header-container {
      transformRotate(center,icon-rotate,3s,linear,0s,infinite);
  }
}
@keyframes icon-rotate {
  from{
    transform: rotate(0deg);
  }
  to{
    transform: rotate(720deg);
  }
}

如截图所示,自己定义了一个transformRotate方法,在下面元素hover的时候调用这个方法,但是这种方式传参太啰嗦,有时候并不想传这么多参数,比如我仅仅想改变它执行动画的时间,我期望可以用transformRotate(3s)的方式的时候,它可以自动匹配到animation-duration属性并且设置值为3s,而不是必须要把前面的参数一一列举出来,各位大神,有什么好的思路吗?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

怎樣才叫好 2022-09-11 17:32:23

有默认参数的,默认参数就可以省略,如果想调用时只传一个参数,会覆盖左边第一参数的默认值,就在说定义时要把这个参数放在第一位最左边。

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文