Как остановить img от тряски при перемещении элемента? - PullRequest
Новая
       22

Как остановить img от тряски при перемещении элемента?

0 голосов
/ 03 марта 2019

У меня запускается анимация flex-box при нажатии кнопки, но когда это происходит, 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>

1 Ответ

0 голосов
/ 03 марта 2019

Как предположил Сри, теперь все прекрасно работает 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

...