Question

我正在创建滚动触发的css动画，而且我的右侧屏幕转换出现问题。动画完全符合我的要求，但它会在页面的侧面创建不需要的空白。这个空格的大小似乎与我设置的过渡相对应，并且在我触发了页面上的所有动画之前不会消失。有关如何删除此空白以使元素从画布中移出的任何想法吗？

这是我的测试环境的链接 http://lamp.cse.fau.edu/~zellis1/test/

/*Slide in right*/
.slidein-right{
  opacity: 0;
  -moz-transition: all 750ms ease-out;
  -webkit-transition: all 750ms ease-out;
  -o-transition: all 750ms ease-out;
  transition: all 750ms ease-out;

  -moz-transform: translate3d(100px, 0px, 0px);
  -webkit-transform: translate3d(100px, 0px, 0px);
  -o-transform: translate(100px, 0px);
  -ms-transform: translate(100px, 0px);
  transform: translate3d(100px, 0px, 0px);

  -webkit-backface-visibility: hidden;
  -moz-backface-visibility: hidden;
  backface-visibility: hidden;
}

.slidein-right.in-view{
  opacity: 1;
  -moz-transform: translate3d(0px, 0px, 0px);
  -webkit-transform: translate3d(0px, 0px, 0px);
  -o-transform: translate(0px, 0px);
  -ms-transform: translate(0px, 0px);
  transform: translate3d(0px, 0px, 0px);

}

Answer 1

与css动画无关，你可以做的一件事就是添加overfrlow-x：hidden;到你的身体。

body{
    overflow-x: hidden;
}

Answer 2

由于您正在使用变换来动画元素和变换的CSS规范（Animate.css移动元素的方法）指定元素应该影响浏览器的溢出，因此正文溢出直到所有变换动画都是结束了。

您可以在包含元素上添加overflow:hidden（仅在x方向上转换时更好overflow-x:hidden）。

添加此CSS

animation-fix{
  overflow-x:hidden;
}

并将类animation-fix添加到正文并在所有动画完成时将其删除。

你可以通过检查.animation-element.in-view类的div数等于你在html中拥有.animation-element类的div的数量来做到这一点。

Answer 3

这个人总是你的朋友，当你从木制品中得到流氓白色空间时：

 overflow: hidden;

 overflow-x: hidden;
 overflow:y: hidden;

如果异常直接在右边，那么很可能overflow-x将是你想要的人。我还建议在其他网络浏览器中查看它，以确保它完全解决。

检查Chrome，Firefox，Safari和IE或Edge。只是为了得到一个很好的圆润样本。也可以在智能手机上查看。对不起，我的背景是QA，我只是想安装一些奖励逻辑，因为一致性是关键。

作为其中的一部分，我强烈建议按下说F12并直接在页面上编辑CSS，因为它可能发生在与您预期不同的层上。

CSS过渡动画

3 个答案: