javascript - CSS - AOS 动画库 - 为什么滑入式动画破坏了我整个页面的宽度？

Question

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

https://jsfiddle.net/Lca8n0ue/

代码:

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

js:

AOS.init();

唯一有帮助但会破坏 CSS 的是:

.test{
  width: 400px;
}

.test2{
  width: 400px;
}

Answer 1

虽然我不完全确定为什么是这样(我多次遇到同样的问题)但还有另一种方法可以解决这个问题。

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

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