javascript - scrollreveal.js 和 flexbox

Question

我在将 scrollreveal.js 与 flexbox 一起使用时遇到问题。

我已经使用 display flex 在页面上创建了一些两列的行，当尝试使用 scrollreveal 引用分别显示每一列时，只有其中一个在工作。

在仍然能够保持 flex 属性的同时有任何解决方法吗？

HTML

<div class="grid">
  <div class="column __50 __reveal">one</div>
  <div class="column __50 __reveal">two</div>
</div>

CSS

.grid {
  display: flex;
}

.column.__50 {
  width: 50%;
}

JS

window.sr = ScrollReveal({
  distance: '30px',
  duration: 1000,
  scale: 0
});
sr.reveal('.__reveal');

Answer 1

如果我清楚地理解你:

1. 给定- 现有代码
2. 当页面滚动时
3. 然后- 列应该滚动到 View 中

我提供了一个片段，表明它确实可以根据您的代码工作，但您必须为 scrollreveal 效果提供足够的空间。

测试

添加一个占用初始 View 空间的 div。

向 .column.__50 类添加一个高度，以便您可以看到它的实际效果。

添加一个边框，这样你就可以看到它们是如何放置的，当你不再需要它时，你可以随时注释掉它。 “调试”和可视化您的 div 的良好做法。

window.sr = ScrollReveal({
        distance: '30px',
        duration: 1000,
        scale: 0
    });
    sr.reveal('.__reveal');

.grid {
  display: flex;
}
.column.__50 {
  width: 50%;
  height: 800px;
  border: 2px solid black;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/scrollReveal.js/4.0.0-beta.25/scrollreveal.js"></script>
<div class="grid">
  <div class="column __50 ">
    No class="__reveal 1"
  </div>
  <div class="column __50 ">
    No class="__reveal 2"
  </div>
</div>
<div class="grid">
  <div class="column __50 __reveal">
    one
  </div>
  <div class="column __50 __reveal">
    two
  </div>
</div>