scss中对象式编程(骚操作)
好久没有写博客了,最近一直比较忙。
今天在做大屏可视化项目的时候,需要写一个动画,供6个表格使用,但是每个表格相差的只有参数不同:
具体效果如下:
这是左侧的三个面板从左侧弹出 ,右边也有这样的三个
正常来说 在vue中我需要写好多的class 从wrap1 - wrap6
<transition appear name="wrap1">
.....
</transition>
.wrap1-enter-active, .wrap1-leave-active {
transition: margin-left 0.8s;
};
.wrap1-enter, .wrap1-leave-to {
margin-left: -100%;
}
.wrap2-enter-active, .wrap2-leave-active {
transition: margin-left 0.8s;
};
.wrap2-enter, .wrap2-leave-to {
margin-left: -100%;
}
.............需要6组这样的代码......
能不能简化呢? 于是我想用对象式的方法循环出来
$wrap: (
wrap1: (
time:1s,
margin:-100%
),
wrap2: (
time:1.3s,
margin:-120%
),
wrap3: (
time:1.6s,
margin:-150%
),
wrap4: (
time:1s,
margin:100%
),
wrap5: (
time:1.3s,
margin:120%
),
wrap6: (
time:1.6s,
margin:150%
)
);
@each $w in $wrap {
$index: index($wrap, $w); // 获取循环下标
$w2: map-get($wrap, wrap+$index); // 获取具体每一组的对象
$time: map-get($w2, time);
$left: map-get($w2, margin);
.wrap#{$index}-enter-active, .wrap#{$index}-leave-active {
transition: margin-left $time cubic-bezier(0.42,0,0.58,1);
};
.wrap#{$index}-enter, .wrap#{$index}-leave-to {
margin-left: $left;
}
}
这样一来 编译完 就是跟之前的一样了,省了重复的代码,而且可以在$wrap中统一配置动画效果。
相当于建立一个配置文件,之后能应用的场景还是挺多的
临时想到的 如果有更好的实现方案,欢迎提出来。