移动元素时如何阻止图像摇晃？

问题描述 投票：-1回答：1

我点击按钮时会有灵活动画片动画，但是当它发生时，img会摇晃一下（类似于1-2px来回），它会如此轻微但是很明显，如果你很难看到这个让我知道我将尝试制作视频。

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

    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;
    }
	<div class="container">

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

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

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

	</div>
html css css3 flexbox css-transforms
1个回答
0
投票

正如Sree所建议的那样，现在https://codepen.io/MariusZMM/pen/eXzNKX工作得很好

但我只是好奇，如果我使用bootstrap它在左侧和右侧填充，我似乎无法摆脱。但是，当我禁用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

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.