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

如果我明白你的意思：

给定的页面-页面滚动时的现有代码

• Then-列应该滚动到

中

我已经提供了一个代码片段，表明它确实基于您的代码工作，但您必须为滚动显示效果提供足够的空间。

测试

添加一个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>

​

Answer 2

据我所知，您必须将一个序列间隔(以毫秒为单位)传递给interval ()方法，从而使序列动画变得轻而易举。

sr.reveal('.__reveal', 300);

堆栈代码段

​

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

.grid {
  display: flex;
  font: 13px Verdana;
  flex-wrap: wrap;
}

.column.__50 {
  width: 50%;
  height: 100px;
  background: red;
  border: 8px solid #ffffff;
  border-radius: 20px;
  padding: 20px;
  color: #fff;
  box-sizing: border-box;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://unpkg.com/scrollreveal/dist/scrollreveal.min.js"></script>
<div class="grid">
  <div class="column __50 __reveal">one</div>
  <div class="column __50 __reveal">two</div>
  <div class="column __50 __reveal">three</div>
  <div class="column __50 __reveal">four</div>
</div>

​