[問題] sass 迴圈選取

[azrael60532 (Kevin)]

各位大神好
我也不確定標題這樣下合不合適
小弟目前遇到一個需求如下圖

https://i.imgur.com/CFpifTP.png

我想要做一個類似百葉窗的效果
可以依序從左上角斜斜的淡入到右下角
我有在codepen上找到類似的效果

https://codepen.io/shawnoakley/pen/ZNXXqj

但他是用js跑迴圈產出50個div
讓同一條斜上的div有一樣的transition-delay
但目前我的狀況是 50個div已經切好
要怎麼用sass去選到同一條斜線上的div設定transition-delay
如果不寫50個nth-child的話，還有更好的做法嗎?
求大神們指教，謝謝!!

[1]
[2,11]
[3,12,21]
......

--
※ 發信站: 批踢踢實業坊(ptt.cc), 來自: 220.134.69.195 (臺灣)
※ 文章網址: https://www.ptt.cc/bbs/Web_Design/M.1615103694.A.988.html
推 shter: 你切的同時不就可以標不同的 class 了，各組設不同 delay
→ shter: 要在同一個時間切換效果的就在 class 加上該 name
→ shter: 不然你就是用 js 去抓 div，就算不是 js 產的還是抓的到
→ azrael60532: 不好意思，沒說清楚。我補充說明，我的結構一開始
→ azrael60532: 只有一個div背景圖，是用splitting.js切割成5x10
→ azrael60532: 所以我沒辦法一開始就設定好class
→ miau: 用9n+i (i=1~9)搭配9n+10i (1~5)，這樣就是寫14組XD
→ Rplus: 供參 https://github.com/Rplus/rplus.github.io/issues/41
→ Rplus: https://codepen.io/RplusTW/pen/KKNrPzr
→ Rplus: 通常這類波浪狀動畫，可以尋著 row index 跟 column index
→ Rplus: 的組合去推敲；你的例子是用基本的相加即可達成
→ Rplus: 實作上可能要搭配與總合的差值來處理動畫延遲
→ azrael60532: 感謝各位大神解答，目前是有實做出來了!
→ azrael60532: 附上codepen: https://reurl.cc/zbpdnN
→ azrael60532: 但還是有個小問題 css會重複洗出來 不知道是哪邊寫
→ azrael60532: https://i.imgur.com/3YlNpCm.jpg
→ Rplus: 跟 $j 無關的那行 transition-delay 要上移一層
→ azrael60532: 原來是這樣！！太感謝了