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"; 
    } 
}; 

Существует гораздо больше на эту страницу в поэтому некоторые идентификаторы и т. д. не уверены. Мне кажется, что использование «toggleClass» - лучшая идея для myForm/отложенного свопа. (Я делаю это так, чтобы «Go» снова не возвращал форму.

Кодепен находится 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>

Answer 2

Scroll происходит потому, что в то время как форма крутится это выходит из родителей.

Одним из возможных решений является добавление переполнения: скрытое на время анимации.

body.transitionActive{ 
    overflow: hidden; 
} 

JS

[...] 
    $('#myForm').addClass('postponed'); 
    $('body').addClass('transitionActive'); 
    setTimeout(function(){ 
     $('body').removeClass('transitionActive'); 
    }, 3000); 
    $('#myForm').removeClass('myForm'); 
[...] 

Посмотрите, как это работает здесь: http://codepen.io/anon/pen/ALNLak