作者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/cn.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