Question

当单击按钮时，我会使用flex-box动画，但是当img发生抖动时（来回1-2px左右），它会稍微变一点，但如果您很难看到它，它会引起注意。我知道我会尝试制作视频。

CodePen：https://codepen.io/MariusZMM/pen/PLzodX

return getUserStream().collect(toMap(Company::getName, c -> converter.apply((User) c.getUsers().iterator())));

    html,
    body {
      width: 100%;
      height: 100%;
      background: #544;
    }
    
    .container {
      position: relative;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      height: 100%;
    }
    
    .item {
      height: 100%;
      position: relative;
      overflow: hidden;
    }
    
    .item .cA,
    .item .lI {
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      text-align: center;
    }
    
    .f1 {
      -webkit-box-flex: 0;
          -ms-flex-positive: 0;
              flex-grow: 0;
    }
    
    .f2 {
      -webkit-box-flex: 1;
          -ms-flex-positive: 1;
              flex-grow: 1;
    }
    
    .f2 .btn {
      position: absolute;
      width: 50%;
      height: 70px;
      top: 80%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      background: #444;
    }
    
    .img {
      background-image: url("https://davidcrew.files.wordpress.com/2010/01/wallpaper-177057.jpg");
      background-attachment: fixed;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      height: 100%;
    }
    
    .f3 {
      -webkit-box-flex: 1.5;
          -ms-flex-positive: 1.5;
              flex-grow: 1.5;
    }

Answer 1

按照Sree的建议，现在一切都很好https://codepen.io/MariusZMM/pen/eXzNKX

但是我很好奇我是否使用引导程序，它会在左右两侧填充，这似乎无法摆脱。但是当我禁用Bootstrap时一切都很好。这不是问题，但好奇是什么原因导致了这个ins Bootstrap？

具有Bootstrap的完整版本：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Register Me</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
    <link rel="stylesheet" href="./css/main.css" />
    <script rel="preload" src="./js/anime.js"></script>
</head>

<body>

    <div class="container">

        <div class="item f1" style="background: red"></div>

        <div class="item f2">
            <div class="img"></div>
            <button class="btn">
                <div class="sI">Sign In</div>
            </button>
        </div>

        <div class="item f3" style="background: blue"></div>

    </div>

    <script src="./js/main.js"></script>
</body>

</html>

CSS：

html,
body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #d63d3d;
}

.container {
  position: absolute;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  height: 90%;
  width: 90%;
  z-index: 10;
}

.item {
  height: 100%;
  position: relative;
  overflow: hidden;
}

.item .cA,
.item .lI {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  text-align: center;
}

.img::before {
  background-image: url("https://davidcrew.files.wordpress.com/2010/01/wallpaper-177057.jpg");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  position: fixed;
  content: '';
  height: 100%;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  z-index: -9999;
  will-change: transform;
}

.f1 {
  -webkit-box-flex: 0;
      -ms-flex-positive: 0;
          flex-grow: 0;
}

.f2 {
  -webkit-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1;
}

.f3 {
  -webkit-box-flex: 1.5;
      -ms-flex-positive: 1.5;
          flex-grow: 1.5;
}

.btn {
  position: absolute;
  width: 50%;
  height: 70px;
  top: 80%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  background: #444;
}

JS：

var start = anime.timeline({
  easing: 'easeInOutSine',
  autoplay: false,
  duration: 450
});

start
  .add({
    targets: '.f3',
    flexGrow: '0'
  })
  .add({
    targets: '.f1',
    flexGrow: '1.5'
  });

document.querySelector('.btn').onclick = function() {
  start.play();
  if (start.began) {
    start.reverse();
  }
};

更新：添加填充：0；解决了。我只需要在正确的位置添加此文件，在本例中为.container

移动元素时如何防止img抖动？

1 个答案: