各位大神好
我也不確定標題這樣下合不合適
小弟目前遇到一個需求如下圖
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]
......

你切的同時不就可以標不同的 class 了，各組設不同 delay要在同一個時間切換效果的就在 class 加上該 name不然你就是用 js 去抓 div，就算不是 js 產的還是抓的到

不好意思，沒說清楚。我補充說明，我的結構一開始只有一個div背景圖，是用splitting.js切割成5x10所以我沒辦法一開始就設定好class

用9n+i (i=1~9)搭配9n+10i (1~5)，這樣就是寫14組XD

供參 https://github.com/Rplus/rplus.github.io/issues/41https://codepen.io/RplusTW/pen/KKNrPzr通常這類波浪狀動畫，可以尋著 row index 跟 column index的組合去推敲；你的例子是用基本的相加即可達成實作上可能要搭配與總合的差值來處理動畫延遲

感謝各位大神解答，目前是有實做出來了!附上codepen: https://reurl.cc/zbpdnN但還是有個小問題 css會重複洗出來 不知道是哪邊寫https://i.imgur.com/3YlNpCm.jpg

跟 $j 無關的那行 transition-delay 要上移一層

原來是這樣！！太感謝了