1

我正在使用 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>

谢谢

4

1 回答 1

0

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

.wow {
  visibility: visible !important;
}
于 2016-09-07T07:05:15.810 回答