Вопросы Теги

Как остановить дрожание изображения при перемещении элемента?

UInt32 не является совместимым с CLS , поэтому он может быть недоступен на всех языках, ориентированных на Common Language Specification. Int32 совместим с CLS и, следовательно, гарантированно существует на всех языках.

-1
задан Michael_B 3 March 2019 в 19:53
поделиться

1 ответ

Как и предположил Сри, теперь все прекрасно работает. левая и правая сторона, от которой я не могу избавиться. Но когда я отключаю 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

0
ответ дан Marius 3 March 2019 в 19:53
поделиться