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中統一配置動畫效果。

相當於建立一個配置文件，之後能應用的場景還是挺多的

臨時想到的 如果有更好的實現方案，歡迎提出來。