3

在我的网站上，我有一个包含 3 列（带引导程序）的部分，在移动尺寸下，堆栈彼此叠放，并以更大的尺寸彼此相邻排列。现在应该发生的是，在滚动时它们应该与 zoomIn 动画一起出现。哪个有效，但仅适用于最小宽度：300px。一旦页面达到 min-width: 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-->

这是我的 min-width: 300px 和 min-width: 480px 的 CSS：

@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 类添加到图像而不是 a 标记来修复它 - 添加星号，这样你就可以看到我移动类的位置，不要把它们放在你自己的代码 ;）

<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-->
4

0 回答 0