javascript - 我正在尝试制作一个搜索栏的动画，该搜索栏在单击时滑动打开，而导航栏消失反之亦然

Question

我现在的问题是，当我单击以删除类并在导航栏重新出现时折叠搜索栏时，搜索栏在折叠时向下移动，因为重新出现的导航栏很快在标题中占据了它之前的位置searchBar 完成折叠，即使我将动画和导航栏的过渡添加到 0 并缓慢过渡回来，以便搜索栏有足够的时间折叠，同时保持其在布局中的位置。

显然我做得不对，有人可以帮助我实现我的目标吗？ 谢谢，

HTML

var btn = document.querySelector('.btn'),
  searchBar = document.querySelector('.searchBar'),
  searchContainer = document.querySelector('.search-container'),
  searchInput = document.querySelector('.search-input'),
  login = document.querySelector('.login'),
  inputContiainer = document.querySelector('.input-container'),
  navBar = document.querySelector('.navBar');

btn.addEventListener('click', function() {
  if(classie.hasClass(searchContainer,'open') &&
    classie.hasClass(searchBar,'elongate') &&
    classie.hasClass(navBar,'hide')){
    classie.removeClass(searchContainer,'open');
    classie.removeClass(searchBar,'elongate');
    classie.removeClass(navBar,'hide');
  }else{
    classie.addClass(navBar,'hide');
    classie.addClass(searchContainer,'open');
    classie.addClass(searchBar,'elongate');
  }
})

       navBar {
               float: left;
               width: auto;
               margin-left: 8.333333333333333%;
               padding-top: 25px;
               transition: width 0.68s ease-in-out;
             }
           .nav {
               display: flex;
               list-style: none;
           }
           .nav a {
                text-decoration: none;
                display: block;
                padding: 8px 16px;
                font-size: 16px;
            }
            .searchBar {
                float: right;
                padding-right: 25px;
                padding-top: 16px;
                width: 40px;
                transition: width 0.68s ease-in-out;
            }
           .open {
                transition: width 0.68s ease-in;
                width: 100%;
            }
           .navBar.hide {
                transition: width 0.68s ease-in-out;
                width: 0;
            }
            .navBar.hide ul {
                display: none;
             }
             .elongate {
                 transition: width 0.68s ease-in-out;
                 width: 43%;
              }
     

<div class="navBar">
                <ul class="nav">
                    <li><a href="#">Home</a></li>
                    <li><a href="#">About</a></li>
                    <li><a href="#">Work</a></li>
                    <li><a href="#">Support</a></li>
                    <li><a href="#">Blog</a></li>
                </ul>
            </div>
            <a href="#" class="login">
                <span class="fa fa-user"></span>
            </a>
            <div class="searchBar">
                <div class="search-container">
                    <form>
                        <label class="btn">
                            <span class="fa fa-search"></span>
                        </label>
                       <div class="input-container">
                          <input type="search" placeholder="Enter Keyword" class="search-input"> 
                       </div> 
                    </form>
                </div>
            </div>
     

对于 classie stuffs 来说，它只是一个用于添加、删除和切换类的最小库。

Answer 1

经过长期艰苦的集思广益，特别是因为我的问题在很大程度上被一反常态地忽略了，我终于找到了解决我的问题的方法，返回时搜索栏换行的原因是导航栏宽度最初设置auto，不知何故 auto 的值无法有转换延迟，

给 navBar 一个固定的宽度实际上产生了预期的结果。

  .navBar {
      float: left;
      width: 40%;/* as opposed to auto, which didn't transition smoothly*/
      margin-left: 8.333333333333333%;
      padding-top: 25px;
      transition: width 0.68s ease-in-out;

}