2020年1月6日 02:24:58go评论70阅读模式

英文:

Delayed Boxes FadeIn-Animation

问题

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

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

.fadeInUp {
    & + .fadeInUp {
        animation-delay: 300ms;
        & + .fadeInUp {
            animation-delay: 600ms;
            & + .fadeInUp {
                animation-delay: 900ms;
                & + .fadeInUp {
                    animation-delay: 1200ms;
                    & + .fadeInUp {
                        animation-delay: 1500ms;
                    }
                }
            }
        }
    }

    opacity: 0;
    animation: fadeInUp 1000ms forwards;
}

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

问题：

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

& + * { ... }

但是要特定于类.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:

.fadeInUp {
    &amp; + .fadeInUp {
        animation-delay: 300ms;
        &amp; + .fadeInUp {
            animation-delay: 600ms;
            &amp; + .fadeInUp {
                animation-delay: 900ms;
                &amp; + .fadeInUp {
                    animation-delay: 1200ms;
                    &amp; + .fadeInUp {
                        animation-delay: 1500ms;
                    }
                }
            }
        }
    }

    opacity: 0;
    animation: fadeInUp 1000ms forwards;
}

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

&amp; + * { ... }

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来完成“繁重的工作”。

<!DOCTYPE html>
<html>
  <body>
    <div class="boxes">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </body>
</html>

body {
  height: 2000px;
  display: grid;
  justify-items: center;
}

.boxes {
  margin-top: 1000px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: 300px;
  grid-gap: 30px;
  justify-items: center;
  width: 80%;
}

.boxes div {
  height: 300px;
  width: 300px;
  box-shadow: 0 0 15px #ccc;
  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);
  background-size: cover;
}

.boxes div:nth-child(2) {
  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);
}

.boxes div:nth-child(3) {
  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);
}

.boxes div:nth-child(4) {
  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);
}

.boxes div:nth-child(5) {
  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);
}

.boxes div:nth-child(6) {
  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);
}

.fadeInUp {
  opacity: 0;
  animation: fadeInUp 1000ms forwards;
}

@keyframes fadeInUp {
  0% {
    opacity: 0;
    transform: translateY(20px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

function inView(el) {
  let box = el.getBoundingClientRect();
  return box.top < window.innerHeight && box.bottom >= 0;
}

const boxes = document.querySelectorAll('.boxes > div');

window.onscroll = (w) => {
  boxes.forEach((e, i) => {
    e.style.animationDelay = i * 300 + "ms";
    if (inView(e)) {
      e.classList.add('fadeInUp');
    }
  });
}

英文:

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+"ms"; in your loop and let javascript do... the "dirty work".

function inView(el) {
let box = el.getBoundingClientRect();
return box.top &lt; window.innerHeight &amp;&amp; box.bottom &gt;= 0;
}
const boxes = document.querySelectorAll(&#39;.boxes &gt;  div&#39;);
window.onscroll = (w) =&gt; {
boxes.forEach((e, i) =&gt; {
e.style.animationDelay=i*300+&quot;ms&quot;;
if (inView(e)) {
e.classList.add(&#39;fadeInUp&#39;);
}
});
}

body {
height: 2000px;
display: grid;
justify-items: center;
}
.boxes {
margin-top: 1000px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 300px;
grid-gap: 30px;
justify-items: center;
width: 80%;
}
.boxes div {
height: 300px;
width: 300px;
box-shadow: 0 0 15px #ccc;
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);
background-size: cover;
}
.boxes div:nth-child(2) {
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);
}
.boxes div:nth-child(3) {
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);
}
.boxes div:nth-child(4) {
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);
}
.boxes div:nth-child(5) {
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);
}
.boxes div:nth-child(6) {
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);
}    
.fadeInUp {
opacity: 0;
animation: fadeInUp 1000ms forwards;
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

&lt;html&gt;
&lt;body&gt;
&lt;div class=&quot;boxes&quot;&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

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

.boxes div:nth-child(3n+1){
animation-delay:300ms;
}
.boxes div:nth-child(3n+2){
animation-delay:600ms;
}
.boxes div:nth-child(3n+3){
animation-delay:900ms;
}

function inView(el) {
let box = el.getBoundingClientRect();
return box.top &lt; window.innerHeight &amp;&amp; box.bottom &gt;= 0;
}
const boxes = document.querySelectorAll(&#39;.boxes &gt;  div&#39;);
window.onscroll = (w) =&gt; {
boxes.forEach((e, i) =&gt; {
if (inView(e)) {
e.classList.add(&#39;fadeInUp&#39;);
}
});
}

body {
height: 2000px;
display: grid;
justify-items: center;
}
.boxes {
margin-top: 1000px;
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 300px;
grid-gap: 30px;
justify-items: center;
width: 80%;
}
.boxes div {
height: 300px;
width: 300px;
box-shadow: 0 0 15px #ccc;
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);
background-size: cover;
}
.boxes div:nth-child(2) {
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);
}
.boxes div:nth-child(3) {
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);
}
.boxes div:nth-child(4) {
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);
}
.boxes div:nth-child(5) {
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);
}
.boxes div:nth-child(6) {
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);
}    
.fadeInUp {
opacity: 0;
animation: fadeInUp 1000ms forwards;
}
.boxes div:nth-child(3n+1){
animation-delay:300ms;
}
.boxes div:nth-child(3n+2){
animation-delay:600ms;
}
.boxes div:nth-child(3n+3){
animation-delay:900ms;
}
@keyframes fadeInUp {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0);
}
}

&lt;html&gt;
&lt;body&gt;
&lt;div class=&quot;boxes&quot;&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;div&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;

通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。

延迟框淡入动画

问题

答案1

GSAP的ScrollTrigger会同时运行所有动画，即使是在视窗外的元素。

有一个开关语句检查多个情况，而无需穿透。

在JSX中显示具有属性的对象列表。

高图帮助 – 在图表方面遇到问题

What's the correct way to type hint an empty list as a literal in python?

如何在Highcharts Gantt中更改本地化的星期名称

如何在同一个流中使用多个过滤器和映射函数？

如何使用Map/Set来将代码优化到O(n)？

.NET MAUI Android在GitHub Actions上构建失败，错误代码为1。

如何在Playwright视觉比较中屏蔽多个定位器？

在C++中，可以使用可变模板参数来检索类型的内部类型。

selenium.common.exceptions.StaleElementReferenceException: Message: stale element reference: stale element not found

Creating and opening a URL to log in to Website via Basic Auth with Robot Framework/Selenium (Python)

AG Grid 在上下文菜单中以大文本形式打开

发表评论