Javascript CSS转换导致回滚/闪存

不完全确定如何解释发生了什么。我正在尝试在我的搜索栏提交后进行转换。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%;
}

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表单

 <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>

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

代码笔就在这里——如果你注意到当你点击“go”时，你会看到一个滚动条周期性地弹出。在较小的分辨率上，它会发生，在4K上，它会发生。在网站上，它实际上是导致背景图像“抖动”并快速移动

我对转换不太熟悉，但我非常明确地遵循了文档。我会将其反转以使搜索栏返回，因为它现在有点“快照”返回。如果您有任何建议，我将不胜感激

---

谢谢。

这是因为组件将从文档中退出。请尝试将

溢出：隐藏

添加到其父容器中。请尝试此操作，并告知我这是否对您有帮助

函数updateTransition（）{
var el=文档查询选择器（“div.revolver”）；
如果（el）{
$（'#myForm'）.addClass（'延期'）；
$（'#myForm'）.removeClass（'myForm'）；
el.className=“postSearch”；
}否则{
$（'#myForm'）.addClass（'myForm'）；
$（'#myForm'）.removeClass（'推迟'）；
el=document.querySelector（“div.postSearch”）；
el.className=“左轮手枪”；
}
}；

html，
身体{
位置：相对位置；
身高：100%；
保证金：0；
/*临时班*/
}
.溢出隐藏{
溢出：隐藏；
位置：相对位置；
最小高度：100%；
}
.后期搜索{
-webkit过渡：所有3s轻松；
-webkit变换：旋转（1440度）；
-moz转换：所有3s轻松；
-moz变换：旋转（1440度）；
左缘：80%；
}

发现


在…上
受…控制


走！

这是因为组件将从文档中退出。请尝试将

溢出：隐藏

添加到其父容器中。请尝试此操作，并告知我这是否对您有帮助

函数updateTransition（）{
var el=文档查询选择器（“div.revolver”）；
如果（el）{
$（'#myForm'）.addClass（'延期'）；
$（'#myForm'）.removeClass（'myForm'）；
el.className=“postSearch”；
}否则{
$（'#myForm'）.addClass（'myForm'）；
$（'#myForm'）.removeClass（'推迟'）；
el=document.querySelector（“div.postSearch”）；
el.className=“左轮手枪”；
}
}；

html，
身体{
位置：相对位置；
身高：100%；
保证金：0；
/*临时班*/
}
.溢出隐藏{
溢出：隐藏；
位置：相对位置；
最小高度：100%；
}
.后期搜索{
-webkit过渡：所有3s轻松；
-webkit变换：旋转（1440度）；
-moz转换：所有3s轻松；
-moz变换：旋转（1440度）；
左缘：80%；
}

发现


在…上
受…控制


走！

之所以出现滚动，是因为窗体旋转时，它会从父窗体中退出

一个可能的解决方案是添加溢出：动画时隐藏

body.transitionActive{
  overflow: hidden;
}

js

---

看看它是如何工作的：

之所以会出现滚动，是因为当窗体旋转时，它会离开父级

一个可能的解决方案是添加溢出：动画时隐藏

body.transitionActive{
  overflow: hidden;
}

js

---

看看它是如何工作的：

我甚至没有想过使用像那样的溢出-谢谢！仅建议：就我个人而言，我永远不会只为一个模块将

溢出：隐藏；

添加到

。但这只是为了动画的时间-之后它被删除了我甚至没有想过使用像那样的溢出-谢谢！仅建议：Perso最后，我永远不会只为一个模块将

溢出：隐藏；

添加到

，但这只是为了动画时间-之后会将其删除