Горизонтально разрушаться вход с дисплеем: сгибать

Question

У меня есть два окна поиска появляются на верхней части (мобильный) страницы:

Желаемое поведение на фокус (т.е. щелкните внутри одной из коробок) является :

• выбранное окно расширяет
• другой ящик разрушается горизонтально
• близкий значок расширяется справа.

Вот что он выглядит как после перехода:

Это код:

<div class="navigation--mobile__search"> 
    <div class="header-searchfield" id="kurssuche"> 
     <input type="text" class="header-searchfield__input" placeholder="Search1"> 
      <a href=""> 
       <span class="icon icon--lupe"> 
        <svg class="icon__svg"> 
         <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/svg/svg-symbol.svg#lupe"></use> 
        </svg> 
       </span> 
      </a> 
    </div> 
    <div class="header-searchfield" id="volltextsuche"> 
     <input type="text" class="header-searchfield__input" placeholder="Search2"> 
      <a href=""> 
       <span class="icon icon--lupe"> 
        <svg class="icon__svg"> 
         <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/svg/svg-symbol.svg#lupe"></use> 
        </svg> 
       </span> 
      </a> 
    </div>      
    <span class="icon icon--close-x header-searchfield__close-button" style="display: none;"> 
     <svg class="icon__svg"> 
      <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="/assets/svg/svg-symbol.svg#close-x"></use> 
     </svg> 
    </span> 
</div> 

соответствующие LESS-классы:

.navigation--mobile__search { 
     background: @common-quarks-color--cd-anthracite; 
     display: flex; 
     padding: .625rem .75rem; 
     position: relative; 
     .header-searchfield { 
      display: flex; 
      flex: 1; 
      &__input { 
       flex-grow: 1; 
       padding: .5625rem 2rem .5625rem .8125rem; 
      } 
      &__close-button { 
       flex: 0 0 1.8rem; 
       color: white; 
       display: none; 
       margin: .7rem 0 .7rem .5rem; 
       svg { 
        fill: @searchfield--border-color; 
        height: .8125rem; 
        width: .8125rem; 
       } 
      } 
     } 
    } 

И javascript:

$(function() { 
    $("#kurssuche") 
    .focusin(function() { 
     $("#volltextsuche").hide(500); 
     $(".header-searchfield__close-button").show(500); 
     $(".navigation--mobile__search-results").animate({height: "400px"}, 500); 
    }) 
    .focusout(function() { 
     $("#volltextsuche").show(500); 
     $(".header-searchfield__close-button").hide(500); 
     $(".navigation--mobile__search-results").animate({height: "0"}, 500); 
    }); 
    $("#volltextsuche") 
    .focusin(function() { 
     $("#kurssuche").hide(500); 
     $(".header-searchfield__close-button").show(500); 
     $(".navigation--mobile__search-results").animate({height: "400px"}, 500); 
    }) 
    .focusout(function() { 
     $("#kurssuche").show(500); 
     $(".header-searchfield__close-button").hide(500); 
     $(".navigation--mobile__search-results").animate({height: "0"}, 500); 
    }); 
    $(".header-searchfield__close-button").on('click', function() { 
    $(".header-searchfield__input").val(""); 
    }); 
}); 

Проблема

Для желаемого поведения горизонтально рушится, я обычно просто захватить DIV с входом, который не выбран, и анимировать ширину до 0. Это не работает, потому что wrapper div display: flex - Я попытался поэкспериментировать с flex: -Attribute, но он, похоже, не работает. Есть ли уловка для анимации flex-divs до ширины 0?

Fiddle:https://jsfiddle.net/amear6x0/

Answer 1

Вы можете использовать только CSS, чтобы добиться того, что вы пытаетесь сделать. Уловкой является следующее:

1. Используйте классы, чтобы указать отображаемые/скрытые состояния отдельных компонентов. Мы все еще можем использовать jQuery для переключения этих классов. Затем мы можем потерять громоздкую функцию jQuery .aninmation();)
2. Переключить между шириной 0 и 100% на входные элементы и кнопку закрытия в зависимости от состояния. Браузер может плавно перемещаться по ширине. Я решил использовать длительность 500ms (как вы указали в коде jQuery), и для tween просто свойство width с использованием функции синхронизации ease-in-out. Вы можете, конечно, определить любые кривые безье, которые вы хотите.
3. Использование focus и blur функции вместо focusin и focusout -Но это только мое личное предпочтение

Некоторые дополнительные советы:

• Использование box-sizing: 0 для предотвращения дополнительных Прокладки входных элементов от принятия дополнительные space
• Используйте overflow: hidden, чтобы скрыть переполненное содержимое, когда ширина родительских элементов свернута до 0.
• Для обеспечения расширяемости избегайте повторения одних и тех же функций для элементов, которые выполняют ту же цель. Я могу свернуть переключатель hide/show для каждого элемента ввода, который у вас есть, в одну функцию, просто используя комбинацию .closest() и .siblings() для выполнения зависящей от контекста фильтрации элементов.

Вот доказательство правильности концепции пример (см updated fiddle here):

$(function() { 
 
    $('.header-searchfield input') 
 
    .on('focus', function() { 
 
    
 
     // Context-dependent filtering to reduce code redundancy :) 
 
     // Search for siblings of parent wrapper, and hide them 
 
     $(this).closest('.header-searchfield').siblings('.header-searchfield').addClass('hide'); 
 
    
 
     // Show the close button 
 
     $('.header-searchfield__close-button').addClass('show') 
 
    }) 
 
    .on('blur', function() { 
 
    
 
     // Context-dependent filtering to reduce code redundancy :) 
 
     // Search for siblings of parent wrapper, and show them 
 
     $(this).closest('.header-searchfield').siblings('.header-searchfield').removeClass('hide'); 
 
    
 
     // Hide the close button 
 
     $('.header-searchfield__close-button').removeClass('show'); 
 
    }); 
 

 
    $('.header-searchfield__close-button').on('click', function() { 
 
    $('.header-searchfield__input').val(''); 
 
    }); 
 
});

* { 
 
    box-sizing: border-box; 
 
} 
 
.navigation--mobile__search { 
 
    background: #28373c; 
 
    display: flex; 
 
    padding: .625rem .75rem; 
 
    position: relative; 
 
} 
 
.navigation--mobile__search .header-searchfield { 
 
    flex: 1 1 auto; 
 
    width: 100%; 
 
    overflow: hidden; 
 
    transition: .5s width ease-in-out; 
 
} 
 
    .navigation--mobile__search .header-searchfield.hide { 
 
    width: 0; 
 
    } 
 
.navigation--mobile__search .header-searchfield__input { 
 
    padding: .5625rem 2rem .5625rem .8125rem; 
 
} 
 
.navigation--mobile__search .header-searchfield__close-button { 
 
    flex: 0 0 auto; 
 
    color: white; 
 
    margin: .7rem 0 .7rem .5rem; 
 
    width: 0; 
 
    overflow: hidden; 
 
    transition: .5s width ease-in-out; 
 
} 
 
    .navigation--mobile__search .header-searchfield__close-button.show { 
 
    width: 1.8rem; 
 
    } 
 
.navigation--mobile__search .header-searchfield__close-button svg { 
 
    fill: #fff; 
 
    height: .8125rem; 
 
    width: .8125rem; 
 
} 
 

 
.header-searchfield { 
 
    position: relative; 
 
    margin: 0 .3125rem; 
 
} 
 
.header-searchfield__input { 
 
    background: none; 
 
    border: 1px solid #fff; 
 
    border-radius: 1rem; 
 
    padding: .5rem 2rem .5rem .8125rem; 
 
    color: #fff; 
 
    font-size: .8125rem; 
 
    width: 100%; 
 
} 
 
.header-searchfield__input:focus { 
 
    outline: 0 none; 
 
    box-shadow: none; 
 
} 
 
.icon { 
 
    width: 0.875rem; 
 
    height: 0.875rem; 
 
    fill: currentColor; 
 
    display: inline-block; 
 
} 
 
.icon__svg { 
 
    height: 100%; 
 
    vertical-align: top; 
 
    width: 100%; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="navigation--mobile__search"> 
 
    <div class="header-searchfield" id="kurssuche"> 
 
    <input type="text" class="header-searchfield__input" placeholder="Search1"> 
 
    </div> 
 
    <div class="header-searchfield" id="volltextsuche"> 
 
    <input type="text" class="header-searchfield__input" placeholder="Search2"> 
 
    </div> 
 
    <span class="icon header-searchfield__close-button"> 
 
    <svg class="icon__svg"> 
 
     <path xmlns="http://www.w3.org/2000/svg" d="M7.4 6l4.3-4.3a1 1 0 0 0 0-1.4 1 1 0 0 0-1.4 0L6 4.7 1.7.3A1 1 0 0 0 .3.3a1 1 0 0 0 0 1.4L4.6 6 .3 10.3a1 1 0 0 0 0 1.4 1 1 0 0 0 1.4 0L6 7.3l4.3 4.4a1 1 0 0 0 1.4-1.4z"/> 
 
    </svg> 
 
    </span> 
 
</div>