各位大神好
我也不确定标题这样下合不合适
小弟目前遇到一个需求如下图
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 要上移一层

原来是这样！！太感谢了