PTT數位生活區 / Web_Design

[問題] sass 迴圈選取

看板Web_Design作者 (Kevin)時間3年前 (2021/03/07 15:54), 編輯推噓1(1推 0噓 17→)
留言18則, 4人參與, 3年前最新討論串1/1
各位大神好 我也不確定標題這樣下合不合適 小弟目前遇到一個需求如下圖 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
推
03/07 18:16, 3年前 , 1F
你切的同時不就可以標不同的 class 了，各組設不同 delay
03/07 18:16, 1F
→
03/07 18:17, 3年前 , 2F
要在同一個時間切換效果的就在 class 加上該 name
03/07 18:17, 2F
→
03/07 18:18, 3年前 , 3F
不然你就是用 js 去抓 div，就算不是 js 產的還是抓的到
03/07 18:18, 3F
→
03/07 19:40, 3年前 , 4F
不好意思，沒說清楚。我補充說明，我的結構一開始
03/07 19:40, 4F
→
03/07 19:40, 3年前 , 5F
只有一個div背景圖，是用splitting.js切割成5x10
03/07 19:40, 5F
→
03/07 19:40, 3年前 , 6F
所以我沒辦法一開始就設定好class
03/07 19:40, 6F
→
03/07 23:23, 3年前 , 7F
用9n+i (i=1~9)搭配9n+10i (1~5)，這樣就是寫14組XD
03/07 23:23, 7F
→
03/09 18:58, 3年前 , 8F
03/09 18:58, 8F
→
03/09 19:27, 3年前 , 9F
03/09 19:27, 9F
→
03/09 19:28, 3年前 , 10F
通常這類波浪狀動畫，可以尋著 row index 跟 column index
03/09 19:28, 10F
→
03/09 19:29, 3年前 , 11F
的組合去推敲；你的例子是用基本的相加即可達成
03/09 19:29, 11F
→
03/09 19:30, 3年前 , 12F
實作上可能要搭配與總合的差值來處理動畫延遲
03/09 19:30, 12F
→
03/10 14:07, 3年前 , 13F
感謝各位大神解答，目前是有實做出來了!
03/10 14:07, 13F
→
03/10 14:09, 3年前 , 14F
03/10 14:09, 14F
→
03/10 14:10, 3年前 , 15F
但還是有個小問題 css會重複洗出來 不知道是哪邊寫
03/10 14:10, 15F
→
03/10 14:11, 3年前 , 16F
03/10 14:11, 16F
→
03/11 10:01, 3年前 , 17F
跟 $j 無關的那行 transition-delay 要上移一層
03/11 10:01, 17F
→
03/11 12:51, 3年前 , 18F
原來是這樣！！太感謝了
03/11 12:51, 18F
‣ 更多 azrael60532 的文章
文章代碼(AID): #1WH8REc8 (Web_Design)
Web_Design 近期熱門文章
更多 近期熱門文章 >>
PTT數位生活區 即時熱門文章
更多 即時熱門文章 >>
‣ 更多 azrael60532 的文章
文章代碼(AID): #1WH8REc8 (Web_Design)