javascript - CSS 转换导致向后滚动/闪烁

Question

不完全确定如何解释正在发生的事情。提交后，我正在尝试对搜索栏进行转换。 CSS 和 HTML 非常大，所以我链接到 CodePen 以查看实际效果，但我也会在此处发布 JS/CSS。

我想对搜索栏做一些“花哨”的事情，同时结果会在同一屏幕上弹出，所以我想“转换”。

CSS

.postSearch{
  -webkit-transition: all 3s ease;
  -webkit-transform: rotate(1440deg);
  -moz-transition: all 3s ease;
  -moz-transform: rotate(1440deg);
  margin-left: 80%;
}

HTML 表单

 <div class="revolver">
        <form id="myForm">
            <p class="inp-wrap search-wrap">
                <label for="charName" class="search-label grid-25">Find</label>
                <input type="search" name="charName" id="charName" class="grid-75" placeholder="e.g. Teodoro" />
            </p>
            <p class="inp-wrap cat-wrap">
                <label for="servers" class="grid-20">on</label>
                <select name="servers" id="servers" class="grid-80">
                    <option>Thrall</option>
                </select>
            </p>
            <p class="inp-wrap submit-wrap">
                <button class="grid-100 btn" name="SubmitButton" onclick="updateTransition()" type="button">
                    <span class="search-icon-container">
          <i class="fa fa-search" aria-hidden="true"></i>
          </span> GO!
                </button>
            </p>
        </form>
        </div>

JS

function updateTransition() {
  var el = document.querySelector("div.revolver");
  if (el) {
    $('#myForm').addClass('postponed');
    $('#myForm').removeClass('myForm');

    el.className = "postSearch";
  } else {
    $('#myForm').addClass('myForm');
    $('#myForm').removeClass('postponed');
    el = document.querySelector("div.postSearch");
    el.className = "revolver";
  }
};

生产中的这个页面还有很多内容，这就是为什么一些 ID 等不能确定的原因。我觉得使用“toggleClass”对于 myForm/postponed 交换也是一个更好的主意。 (我这样做是为了再次点击“开始”不会重新提交表单。

代码笔位于here - 如果你注意到当你点击“开始”时，你会看到一个滚动条周期性地弹出。在较小的分辨率上会发生，在 4K 上会发生。在网站上，它实际上导致背景图片“摇晃”并四处晃动。

我不太熟悉转换，但我非常具体地遵循了文档。我最终会反转它以使搜索栏返回，因为它现在有点“快速”返回。非常感谢任何建议。

谢谢。

Answer 1

是因为组件从文档中出来了。尝试将 overflow: hidden 添加到它的父容器中。请试试这个，如果对您有帮助，请告诉我。

function updateTransition() {
  var el = document.querySelector("div.revolver");
  if (el) {
    $('#myForm').addClass('postponed');
    $('#myForm').removeClass('myForm');

    el.className = "postSearch";
  } else {
    $('#myForm').addClass('myForm');
    $('#myForm').removeClass('postponed');
    el = document.querySelector("div.postSearch");
    el.className = "revolver";
  }
};

html,
body {
  position: relative;
  height: 100%;
  margin: 0;
  /* temporary class */
}
.overflow-hidden {
  overflow: hidden;
  position: relative;
  min-height: 100%;
}
.postSearch {
  -webkit-transition: all 3s ease;
  -webkit-transform: rotate(1440deg);
  -moz-transition: all 3s ease;
  -moz-transform: rotate(1440deg);
  margin-left: 80%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="overflow-hidden">
  <div class="revolver">
    <form id="myForm">
      <p class="inp-wrap search-wrap">
        <label for="charName" class="search-label grid-25">Find</label>
        <input type="search" name="charName" id="charName" class="grid-75" placeholder="e.g. Teodoro" />
      </p>
      <p class="inp-wrap cat-wrap">
        <label for="servers" class="grid-20">on</label>
        <select name="servers" id="servers" class="grid-80">
          <option>Thrall</option>
        </select>
      </p>
      <p class="inp-wrap submit-wrap">
        <button class="grid-100 btn" name="SubmitButton" onclick="updateTransition()" type="button">
          <span class="search-icon-container">
          <i class="fa fa-search" aria-hidden="true"></i>
          </span> GO!
        </button>
      </p>
    </form>
  </div>
</div>