延迟框淡入动画

huangapple
go评论115阅读模式
英文:

Delayed Boxes FadeIn-Animation

问题

我已经创建了一个单独元素（.boxes > div）的淡入效果，当用户向下滚动网站时，我会检查JavaScript是否将元素滚动到视图中，然后添加类.fadeInUp以添加动画效果。

这是我如何通过animation-delay逐个淡入另一个元素的方法：

  1. .fadeInUp {
  2.     & + .fadeInUp {
  3.         animation-delay: 300ms;
  4.         & + .fadeInUp {
  5.             animation-delay: 600ms;
  6.             & + .fadeInUp {
  7.                 animation-delay: 900ms;
  8.                 & + .fadeInUp {
  9.                     animation-delay: 1200ms;
  10.                     & + .fadeInUp {
  11.                         animation-delay: 1500ms;
  12.                     }
  13.                 }
  14.             }
  15.         }
  16.     }
  18.     opacity: 0;
  19.     animation: fadeInUp 1000ms forwards;
  20. }

然而，我想要缩短我的SCSS代码以选择具有相同类名的下一个兄弟类，因为如果我在HTML部分添加了更多的框，我还需要在SCSS部分添加animation-delay。

问题：

是否有一种方法可以缩短这种行为，使用原生CSS（或者SCSS作为替代），而不知道会有多少个框？类似于：

  1. & + * { ... }

但是要特定于类.fadeInUp，并且每个下一个兄弟类都增加animation-delay值300ms？

我创建了这个示例以演示我的问题并使其更清晰：

CodePen: Delayed Boxes FadeIn-Animation

延迟框淡入动画

英文:

I have created a fade-in effect of single elements (.boxes > div) when an user scrolls down the website. I check with Javascript if the element just scrolled into the view and then add the class .fadeInUp to add the animation effect.

This is how I accomplish to fade in another element after another element with animation-delay:

  1. .fadeInUp {
  2.     & + .fadeInUp {
  3.         animation-delay: 300ms;
  4.         & + .fadeInUp {
  5.             animation-delay: 600ms;
  6.             & + .fadeInUp {
  7.                 animation-delay: 900ms;
  8.                 & + .fadeInUp {
  9.                     animation-delay: 1200ms;
  10.                     & + .fadeInUp {
  11.                         animation-delay: 1500ms;
  12.                     }
  13.                 }
  14.             }
  15.         }
  16.     }
  18.     opacity: 0;
  19.     animation: fadeInUp 1000ms forwards;
  20. }

However, I want to shorten my SCSS code to select the next sibling class with the same class name, because if I add boxes to the HTML part, I also need to add the animation-delay to the SCSS part.

Question:

Is there an option to shorten this behaviour with native CSS (or SCSS alternatively) without knowing how many boxes will be there? Something like

  1. & + * { ... }

but specific to the class .fadeInUp and also increasing the animation-delay value by 300ms with each next sibling class?

I have created this pen to demonstrate my question and make it more clear:

CodePen: Delayed Boxes FadeIn-Animation

延迟框淡入动画

答案1

得分: 1

根据我所知，我认为使用纯CSS解决方案可能不太可能完成这个任务。

将来，这可能是您寻找的解决方案：stackoverflow.com/questions/43539203/use-css-counter-in-calc。
目前，您可以在循环中添加一个简单的e.style.animationDelay=i*300+"ms";，让JavaScript来完成“繁重的工作”。

  1. <!DOCTYPE html>
  2. <html>
  3.   <body>
  4.     <div class="boxes">
  5.       <div></div>
  6.       <div></div>
  7.       <div></div>
  8.       <div></div>
  9.       <div></div>
  10.       <div></div>
  11.     </div>
  12.   </body>
  13. </html>
  1. body {
  2.   height: 2000px;
  3.   display: grid;
  4.   justify-items: center;
  5. }
  7. .boxes {
  8.   margin-top: 1000px;
  9.   display: grid;
  10.   grid-template-columns: repeat(3, 1fr);
  11.   grid-template-rows: 300px;
  12.   grid-gap: 30px;
  13.   justify-items: center;
  14.   width: 80%;
  15. }
  17. .boxes div {
  18.   height: 300px;
  19.   width: 300px;
  20.   box-shadow: 0 0 15px #ccc;
  21.   background-image: url(https://images.unsplash.com/photo-1542141372-98a047557466?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
  22.   background-size: cover;
  23. }
  25. .boxes div:nth-child(2) {
  26.   background-image: url(https://images.unsplash.com/photo-1522057306606-8d84daa75e87?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
  27. }
  29. .boxes div:nth-child(3) {
  30.   background-image: url(https://images.unsplash.com/photo-1505870136463-c17bc84b30a2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
  31. }
  33. .boxes div:nth-child(4) {
  34.   background-image: url(https://images.unsplash.com/photo-1524419986249-348e8fa6ad4a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
  35. }
  37. .boxes div:nth-child(5) {
  38.   background-image: url(https://images.unsplash.com/photo-1561336313-0bd5e0b27ec8?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
  39. }
  41. .boxes div:nth-child(6) {
  42.   background-image: url(https://images.unsplash.com/photo-1514828980084-9462f7d03afc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60);
  43. }
  45. .fadeInUp {
  46.   opacity: 0;
  47.   animation: fadeInUp 1000ms forwards;
  48. }
  50. @keyframes fadeInUp {
  51.   0% {
  52.     opacity: 0;
  53.     transform: translateY(20px);
  54.   }
  55.   100% {
  56.     opacity: 1;
  57.     transform: translateY(0);
  58.   }
  59. }
  1. function inView(el) {
  2.   let box = el.getBoundingClientRect();
  3.   return box.top < window.innerHeight && box.bottom >= 0;
  4. }
  6. const boxes = document.querySelectorAll('.boxes > div');
  8. window.onscroll = (w) => {
  9.   boxes.forEach((e, i) => {
  10.     e.style.animationDelay = i * 300 + "ms";
  11.     if (inView(e)) {
  12.       e.classList.add('fadeInUp');
  13.     }
  14.   });
  15. }
英文:

As far as I know, I think it is not possible to do this with a pure CSS solution.

In the future this could be the solution you are looking for: stackoverflow.com/questions/43539203/use-css-counter-in-calc.
For now, I'd add a simple e.style.animationDelay=i*300+&quot;ms&quot;; in your loop and let javascript do... the "dirty work".

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-js -->

  1. function inView(el) {
  2. let box = el.getBoundingClientRect();
  3. return box.top &lt; window.innerHeight &amp;&amp; box.bottom &gt;= 0;
  4. }
  5. const boxes = document.querySelectorAll(&#39;.boxes &gt;  div&#39;);
  6. window.onscroll = (w) =&gt; {
  7. boxes.forEach((e, i) =&gt; {
  8. e.style.animationDelay=i*300+&quot;ms&quot;;
  9. if (inView(e)) {
  10. e.classList.add(&#39;fadeInUp&#39;);
  11. }
  12. });
  13. }

<!-- language: lang-css -->

  1. body {
  2. height: 2000px;
  3. display: grid;
  4. justify-items: center;
  5. }
  6. .boxes {
  7. margin-top: 1000px;
  8. display: grid;
  9. grid-template-columns: repeat(3, 1fr);
  10. grid-template-rows: 300px;
  11. grid-gap: 30px;
  12. justify-items: center;
  13. width: 80%;
  14. }
  15. .boxes div {
  16. height: 300px;
  17. width: 300px;
  18. box-shadow: 0 0 15px #ccc;
  19. background-image: url(https://images.unsplash.com/photo-1542141372-98a047557466?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60);
  20. background-size: cover;
  21. }
  22. .boxes div:nth-child(2) {
  23. background-image: url(https://images.unsplash.com/photo-1522057306606-8d84daa75e87?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60);
  24. }
  25. .boxes div:nth-child(3) {
  26. background-image: url(https://images.unsplash.com/photo-1505870136463-c17bc84b30a2?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60);
  27. }
  28. .boxes div:nth-child(4) {
  29. background-image: url(https://images.unsplash.com/photo-1524419986249-348e8fa6ad4a?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60);
  30. }
  31. .boxes div:nth-child(5) {
  32. background-image: url(https://images.unsplash.com/photo-1561336313-0bd5e0b27ec8?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60);
  33. }
  34. .boxes div:nth-child(6) {
  35. background-image: url(https://images.unsplash.com/photo-1514828980084-9462f7d03afc?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60);
  36. }    
  37. .fadeInUp {
  38. opacity: 0;
  39. animation: fadeInUp 1000ms forwards;
  40. }
  41. @keyframes fadeInUp {
  42. 0% {
  43. opacity: 0;
  44. transform: translateY(20px);
  45. }
  46. 100% {
  47. opacity: 1;
  48. transform: translateY(0);
  49. }
  50. }

<!-- language: lang-html -->

  1. &lt;html&gt;
  2. &lt;body&gt;
  3. &lt;div class=&quot;boxes&quot;&gt;
  4. &lt;div&gt;&lt;/div&gt;
  5. &lt;div&gt;&lt;/div&gt;
  6. &lt;div&gt;&lt;/div&gt;
  7. &lt;div&gt;&lt;/div&gt;
  8. &lt;div&gt;&lt;/div&gt;
  9. &lt;div&gt;&lt;/div&gt;
  10. &lt;/div&gt;
  11. &lt;/body&gt;
  12. &lt;/html&gt;

<!-- end snippet -->

P.S. what about to use: nth-child(n+...) to create a similar result?
Something like:

  1. .boxes div:nth-child(3n+1){
  2. animation-delay:300ms;
  3. }
  4. .boxes div:nth-child(3n+2){
  5. animation-delay:600ms;
  6. }
  7. .boxes div:nth-child(3n+3){
  8. animation-delay:900ms;
  9. }

<!-- begin snippet: js hide: true console: true babel: false -->

<!-- language: lang-js -->

  1. function inView(el) {
  2. let box = el.getBoundingClientRect();
  3. return box.top &lt; window.innerHeight &amp;&amp; box.bottom &gt;= 0;
  4. }
  5. const boxes = document.querySelectorAll(&#39;.boxes &gt;  div&#39;);
  6. window.onscroll = (w) =&gt; {
  7. boxes.forEach((e, i) =&gt; {
  8. if (inView(e)) {
  9. e.classList.add(&#39;fadeInUp&#39;);
  10. }
  11. });
  12. }

<!-- language: lang-css -->

  1. body {
  2. height: 2000px;
  3. display: grid;
  4. justify-items: center;
  5. }
  6. .boxes {
  7. margin-top: 1000px;
  8. display: grid;
  9. grid-template-columns: repeat(3, 1fr);
  10. grid-template-rows: 300px;
  11. grid-gap: 30px;
  12. justify-items: center;
  13. width: 80%;
  14. }
  15. .boxes div {
  16. height: 300px;
  17. width: 300px;
  18. box-shadow: 0 0 15px #ccc;
  19. background-image: url(https://images.unsplash.com/photo-1542141372-98a047557466?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60);
  20. background-size: cover;
  21. }
  22. .boxes div:nth-child(2) {
  23. background-image: url(https://images.unsplash.com/photo-1522057306606-8d84daa75e87?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60);
  24. }
  25. .boxes div:nth-child(3) {
  26. background-image: url(https://images.unsplash.com/photo-1505870136463-c17bc84b30a2?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60);
  27. }
  28. .boxes div:nth-child(4) {
  29. background-image: url(https://images.unsplash.com/photo-1524419986249-348e8fa6ad4a?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60);
  30. }
  31. .boxes div:nth-child(5) {
  32. background-image: url(https://images.unsplash.com/photo-1561336313-0bd5e0b27ec8?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60);
  33. }
  34. .boxes div:nth-child(6) {
  35. background-image: url(https://images.unsplash.com/photo-1514828980084-9462f7d03afc?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=500&amp;q=60);
  36. }    
  37. .fadeInUp {
  38. opacity: 0;
  39. animation: fadeInUp 1000ms forwards;
  40. }
  41. .boxes div:nth-child(3n+1){
  42. animation-delay:300ms;
  43. }
  44. .boxes div:nth-child(3n+2){
  45. animation-delay:600ms;
  46. }
  47. .boxes div:nth-child(3n+3){
  48. animation-delay:900ms;
  49. }
  50. @keyframes fadeInUp {
  51. 0% {
  52. opacity: 0;
  53. transform: translateY(20px);
  54. }
  55. 100% {
  56. opacity: 1;
  57. transform: translateY(0);
  58. }
  59. }

<!-- language: lang-html -->

  1. &lt;html&gt;
  2. &lt;body&gt;
  3. &lt;div class=&quot;boxes&quot;&gt;
  4. &lt;div&gt;&lt;/div&gt;
  5. &lt;div&gt;&lt;/div&gt;
  6. &lt;div&gt;&lt;/div&gt;
  7. &lt;div&gt;&lt;/div&gt;
  8. &lt;div&gt;&lt;/div&gt;
  9. &lt;div&gt;&lt;/div&gt;
  10. &lt;div&gt;&lt;/div&gt;
  11. &lt;div&gt;&lt;/div&gt;
  12. &lt;div&gt;&lt;/div&gt;
  13. &lt;div&gt;&lt;/div&gt;
  14. &lt;div&gt;&lt;/div&gt;
  15. &lt;div&gt;&lt;/div&gt;
  16. &lt;/div&gt;
  17. &lt;/body&gt;
  18. &lt;/html&gt;

<!-- end snippet -->

huangapple
  • 本文由 发表于 2020年1月6日 02:24:58
  • 转载请务必保留本文链接：https://go.coder-hub.com/59602928.html
  • css
  • html
  • javascript
  • sass
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定