Question

在我的网站上，我有一个包含3列（带引导程序）的部分，在移动设备尺寸上，堆叠在彼此的顶部，并以更大的尺寸排列在一起。现在它应该发生的是，在滚动时它们应该与zoomIn动画一起出现。哪个有效但仅在最小宽度：300px。一旦页面达到最小宽度：480px，动画就会停止工作，只显示内容而不是流畅的动画。

我使用wow.js的所有其他内容在所有其他尺寸上都能正常工作。这只是特定部分。

这是我的HTML：

    <div class="portfolio">
  <h1> Portfolio </h1>
  <div class="container">
    <div class="row">
      <div class="col-sm-4">
        <h3>FOO1</h3>
        <a class="wow zoomIn" href="foo1" target="_blank"><img class="foo1" src="images/FOO1.png"/></a>
        <p>lorem ipsum 1</p>
        <p><span>Technologies used:</span> HTML, CSS, Javascript and jQuery</p>
        <hr />
      </div><!--END col-sm-4 FOO1-->
      <div class="col-sm-4">
        <h3>FOO2</h3>
        <a class="wow zoomIn" href="https://foo2.com/" target="_blank"><img class="foo2" src="images/foo2.png"/></a>
        <p>lorem ipsum2</p>
        <p><span>Technologies used:</span> JavaScript, Node.js, Express.js, Mongoose, MongoDB, HTML, CSS, jQuery, Bootstrap, Heroku</p>
        <hr />
      </div><!--END col-sm--4 FOO2-->
      <div class="col-sm-4">
        <h3>FOO3</h3>
        <a class="wow zoomIn" href="http://foo3.com" target="_blank"><img class="foo3" src="images/foo3.png"/></a>
        <p>lorem ipsum 3
        </p>
        <p><span>Technologies used:</span>
          Angular2, Node.JS, Express, Mongoose, MongoDB, HTML, CSS, jQuery,
          Heroku
        </p>
      </div><!--END col-sm-4 FOO3-->
    </div>
  </div>
</div><!--END portfolio div-->

这是我的最小宽度CSS：300px和min-width：480px：

@media(min-width:300px){
 .portfolio{
  /* Permalink - use to edit and share this gradient: 
  http://colorzilla.com/gradient-
  editor/#287dc8+0,75b4e5+46,7ba9e5+61,778be5+87,6a80e2+100 */
  background: #287dc8; /* Old browsers */
  background: -moz-linear-gradient(top, #287dc8 0%, #75b4e5 46%, 
  #7ba9e5 
  61%, #778be5 87%, #6a80e2 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(top, #287dc8 0%,#75b4e5 
  46%,#7ba9e5 61%,#778be5 87%,#6a80e2 100%); /* Chrome10-25,Safari5.1-6 
  */
 background: linear-gradient(to bottom, #287dc8 0%,#75b4e5 46%,#7ba9e5 
 61%,#778be5 87%,#6a80e2 100%); /* W3C, IE10+, FF16+, Chrome26+, 
 Opera12+, Safari7+ */
 filter: progid:DXImageTransform.Microsoft.gradient(       
 startColorstr='#287dc8', endColorstr='#6a80e2',GradientType=0 ); /* 
 IE6-9 */
 box-shadow: 1px 2px 3px rgba(0,0,0,.5);
}

.portfolio h1{
  margin-top: 30px;
}

.portfolio .container .row a img{
  max-width: 95%;
  margin: 15px 0px 15px 7px;
  border-radius: 5px;
  opacity: 1;
  transition: all 0.5s ease;
}

.portfolio .container .row a img:hover{
  opacity: 0.5;
  transition: all 0.5s ease
}

.portfolio .container .row h3{
  font-size: 24px;
  color: whitesmoke;
  font-weight: 400;
  margin-left: 5px;
}

.portfolio .container .row p{
  color: azure;
  padding: 5px;
  font-weight: 300;
  font-size: 17px;
}

.portfolio .container .row span{
  font-weight: 500;
}

.portfolio .container .row hr{
  margin: 17px;
}
}/*CLOSE min-width:300*/

@media(min-width:480px){
 .portfolio{
   padding: 18px 10px;
 }

 .portfolio .container .row p{
   font-size: 20px;
 }

 .portfolio .container .row h3{
   margin-bottom: 30px;
   font-size: 25px;
   color: azure;
 }

 .portfolio .container .row a img{
   display: block;
   margin: 0 auto;
   margin-bottom: 20px;
 }
}/*CLOSE min-width:480*/

我不确定为什么它会停止工作，我认为它必须是我放入新尺寸的款式。所有其他尺寸，768和1024都没有对此部分进行任何样式更改。我已经改变了动画的持续时间，看看是否我没有看到动画，但肯定它在480处停止工作。我也尝试过不同的动画，使用任何其他动画也会使内容出现。

关于为什么这只发生在本节的任何想法？

谢谢！

更新：我仍然不确定为什么会发生这种情况但是我通过将wow zoomIn类添加到图像而不是标记来修复它 - 添加了星号，这样你就可以看到我移动的位置了这个类，不要把它们放在你自己的代码中;）

<div class="col-sm-4">
    <h3>FOO1</h3>
    <a href="foo1" target="_blank"><img class="**wow zoomIn** foo1" src="images/FOO1.png"/></a>
    <p>lorem ipsum 1</p>
    <p><span>Technologies used:</span> HTML, CSS, Javascript and jQuery</p>
    <hr />
  </div><!--END col-sm-4 FOO1-->
  <div class="col-sm-4">
    <h3>FOO2</h3>
    <a href="https://foo2.com/" target="_blank"><img class="**wow zoomIn** foo2" src="images/foo2.png"/></a>
    <p>lorem ipsum2</p>
    <p><span>Technologies used:</span> JavaScript, Node.js, Express.js, Mongoose, MongoDB, HTML, CSS, jQuery, Bootstrap, Heroku</p>
    <hr />
  </div><!--END col-sm--4 FOO2-->
  <div class="col-sm-4">
    <h3>FOO3</h3>
    <a href="http://foo3.com" target="_blank"><img class="**wow zoomIn** foo3" src="images/foo3.png"/></a>
    <p>lorem ipsum 3
    </p>
    <p><span>Technologies used:</span>
      Angular2, Node.JS, Express, Mongoose, MongoDB, HTML, CSS, jQuery,
      Heroku
    </p>
  </div><!--END col-sm-4 FOO3-->

wow.js问题 - 在网站动画的一个部分中，仅适用于移动设备尺寸

0 个答案: