stylus定义的方法传参怎样才能不按照顺序?
今天用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 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
有默认参数的,默认参数就可以省略,如果想调用时只传一个参数,会覆盖左边第一参数的默认值,就在说定义时要把这个参数放在第一位最左边。