作者azrael60532 (Kevin)
看板Web_Design
標題[問題] sass 迴圈選取
時間Sun Mar 7 15:54:51 2021
各位大神好
我也不確定標題這樣下合不合適
小弟目前遇到一個需求如下圖
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://webptt.com/m.aspx?n=bbs/Web_Design/M.1615103694.A.988.html
1F：推 shter: 你切的同時不就可以標不同的 class 了，各組設不同 delay 03/07 18:16
2F：→ shter: 要在同一個時間切換效果的就在 class 加上該 name 03/07 18:17
3F：→ shter: 不然你就是用 js 去抓 div，就算不是 js 產的還是抓的到 03/07 18:18
4F：→ azrael60532: 不好意思，沒說清楚。我補充說明，我的結構一開始 03/07 19:40
5F：→ azrael60532: 只有一個div背景圖，是用splitting.js切割成5x10 03/07 19:40
6F：→ azrael60532: 所以我沒辦法一開始就設定好class 03/07 19:40
7F：→ miau: 用9n+i (i=1~9)搭配9n+10i (1~5)，這樣就是寫14組XD 03/07 23:23
10F：→ Rplus: 通常這類波浪狀動畫，可以尋著 row index 跟 column index 03/09 19:28
11F：→ Rplus: 的組合去推敲；你的例子是用基本的相加即可達成 03/09 19:29
12F：→ Rplus: 實作上可能要搭配與總合的差值來處理動畫延遲 03/09 19:30
13F：→ azrael60532: 感謝各位大神解答，目前是有實做出來了! 03/10 14:07
15F：→ azrael60532: 但還是有個小問題 css會重複洗出來 不知道是哪邊寫 03/10 14:10
17F：→ Rplus: 跟 $j 無關的那行 transition-delay 要上移一層 03/11 10:01
18F：→ azrael60532: 原來是這樣！！太感謝了 03/11 12:51