scss中配置式编程（解决大量相似样式与class）

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中统一配置动画效果。

相当于建立一个配置文件，之后能应用的场景还是挺多的

临时想到的 如果有更好的实现方案，欢迎提出来。