Question

我正在使用AOS库进行动画制作。当我使用动画左滑动和右滑动时，页面的宽度比主体宽度宽，使整个页面看起来很奇怪。我无法在网上找到任何解决方案，我想出的唯一解决方案是，如果我给出了我在px宽度上应用动画的元素（无论出于何种原因，它都不能大于400px）。但是，这个解决方案并没有真正起作用，因为它也破坏了我的CSS。我提供了一个小提琴，所以你可以看到我的意思。我已经花了几个小时，所以如果有人可以提供帮助，我会非常高兴！谢谢！

https://jsfiddle.net/Lca8n0ue/

代码：

putExtra("lat",latitude)
putExtra("long),longitude)

JS：

AOS.init（）;

只有那些帮助但是破坏CSS是：

<div style="background-color:red; height:300px;"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>

<div class="container-fluid">
  <div class="row center-block wrapper">
    <div class="col-sm-6 test" data-aos="slide-right">
      <h2 class="text-center">title</h2>
      <p class="text-center">app</p>
      <div>
        <img class="img-fluid center-block" width="350" height="320" src="http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" alt="">
      </div>
    </div>
    <div class="col-sm-6 test2" data-aos="slide-left">
      <h2 class="text-center">title</h2>
      <p class="text-center">appp</p>
      <div>
        <img class="img-fluid center-block" width="350" height="320" src="http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" alt="">

      </div>
    </div>
    <div class="col-sm-6 test" data-aos="slide-right">
      <h2 class="text-center">title</h2>
      <p class="text-center">app</p>
      <div>
        <img class="img-fluid center-block" width="350" height="320" src="http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" alt="">
      </div>
    </div>
    <div class="col-sm-6 test2" data-aos="slide-left">
      <h2 class="text-center">title</h2>
      <p class="text-center">appp</p>
      <div>
        <img class="img-fluid center-block" width="350" height="320" src="http://unsplash.imgix.net/reserve/9Fx2auQ4yoHM8OpWA8qw__MG_5265.jpg?fit=crop&fm=jpg&h=700&q=75&w=1050" alt="">

      </div>
    </div>
  </div>
</div>

Answer 1

虽然我不完全确定为什么是这样（我有很多时间遇到同样的问题），还有另一种解决方法。

只需在父元素上设置overflow-x: hidden。

在您的情况下，这将是.container-fluid。

CSS - AOS动画库 - 为什么幻灯片动画会破坏整个页面的宽度？

1 个答案: