Question

我正在使用wow.js淡化一些div，这些div位于具有溢出自动和固定高度的div下。

有些物体可以很好地制作动画，但其中一些物体不会动画，甚至不会出现（保持不可见）。

我认为这是一个视口问题。未出现在视口中的对象将永远不可见。

这是我的代码：

<html>
<head>
<style>
.box{
    width:300px;
    margin:0 auto;
    height:500px;
    overflow:auto;
}
.smallBoxes{
    position:relative;
    width:200px;
    height:200px;
    color:#fff;
    background-color:#339;
    text-align:center;
    vertical-align:middle;
    margin:10px;
}

</style>

<script type='text/javascript' src="js/jquery-1.12.4.js"></script>
    <script type='text/javascript' src="js/wow.min.js"></script>
    <script type='text/javascript' src="js/wow.js"></script>


   <script>
 new WOW().init();
</script>
</head>

<body>
<div class="box">
    <div class="smallBoxes wow fadeIn" data-wow-delay="0.0s">Box1</div>
    <div class="smallBoxes wow fadeIn" data-wow-delay="0.1s">Box2</div>
    <div class="smallBoxes wow fadeIn" data-wow-delay="0.2s">Box3</div>
    <div class="smallBoxes wow fadeIn" data-wow-delay="0.3s">Box4</div>
    <div class="smallBoxes wow fadeIn" data-wow-delay="0.4s">Box5</div>
    <div class="smallBoxes wow fadeIn" data-wow-delay="0.5s">Box6</div>
    <div class="smallBoxes wow fadeIn" data-wow-delay="0.6s">Box7</div>
    <div class="smallBoxes wow fadeIn" data-wow-delay="0.7s">Box8</div>
    <div class="smallBoxes wow fadeIn" data-wow-delay="0.8s">Box9</div>
    <div class="smallBoxes wow fadeIn" data-wow-delay="0.9s">Box10</div>
</div>
</body>
</html>

谢谢

Answer 1

我找到了解决方案。刚刚将代码添加到我的风格中。

.wow {
  visibility: visible !important;
}

Wow.js - 具有固定高度的滚动div中的动画。有些物体消失了

1 个答案: