Entrée imbriquée et zone de sélection avec transition stationnaire

Question

J'ai une zone de sélection qui se trouve directement à côté d'une zone de saisie (voir l'extrait pertinent ci-dessous).

Actuellement, deux animations de transition séparées jouent pour afficher les deux boîtes en survol.

Je voudrais n'utiliser qu'une seule transition pour afficher les deux boîtes en survol. Y a-t-il une façon plus propre de faire cela? Est-ce que différentes propriétés de positionnement pourraient m'aider? Merci d'avance!

html, body { 
 
    background-color: rgba(64, 124, 165, 1); 
 
} 
 

 
.quick-search-container { 
 
    cursor: pointer; 
 
    width: 350px; 
 
    vertical-align: top; 
 
    white-space: nowrap; 
 
    position: relative; 
 
    top: -5px; 
 
    float: left; 
 
} 
 

 
.quick-search-container input#search { 
 
    width: 20px; 
 
    height: 30px; 
 
    background: rgba(64, 124, 165, 1); /*replacement*/ 
 
    border: none; 
 
    font-size: 10pt; 
 
    float: right; 
 
    color: #262626; 
 
    padding-right: 35px; 
 
    padding-left: 5px; 
 
    border-top-right-radius: 5px; 
 
    border-bottom-right-radius: 5px; 
 
    color: #000; 
 
    -webkit-transition: width .55s ease, background-color .55s ease; 
 
    -moz-transition: width .55s ease, background-color .55s ease; 
 
    -ms-transition: width .55s ease, background-color .55s ease; 
 
    -o-transition: width .55s ease, background-color .55s ease; 
 
    transition: width .55s ease, background-color .55s ease; 
 
} 
 

 
.quick-search-container input#search { 
 
    color: #65737e; 
 
    border: none; 
 
} 
 

 
.quick-search-container .icon { 
 
    position: absolute; 
 
    vertical-align: text-top; 
 
    right: 0; 
 
    margin-right: 10px; 
 
    margin-top: 6px; 
 
    color: #333; 
 
    font-size: 18px; 
 
} 
 

 
.quick-search-container .selector { 
 
    float: right; 
 
    vertical-align: text-top; 
 
    margin-right: 10px; 
 
    margin-top: 6px; 
 
    color: #ffffff; 
 
    font-size: 18px; 
 
} 
 

 
.quick-search-container input#search:focus, 
 
.quick-search-container input#search:active, 
 
select#selector:active { 
 
    outline: none; 
 
} 
 

 
.quick-search-container:hover input#search { 
 
    outline: none; 
 
    width: 180px; 
 
    background: #fff; 
 
} 
 

 
.quick-search-container:hover select#selector { 
 
    outline: none; 
 
    width: 100px; 
 
} 
 

 
.quick-search-container:hover .icon { 
 
    color: rgba(64, 124, 165, 1); /*replacement*/ 
 
} 
 

 
.quick-search-container .selector { 
 
    margin-right: 0px; 
 
    margin-top: 0px; 
 
    transition: width .22s ease, background-color .55s ease; 
 
} 
 

 
.quick-search-selector { 
 
    margin-right: 0px; 
 
    margin-top: 0px; 
 
    border-top-left-radius: 5px; 
 
    border-bottom-left-radius: 5px; 
 
    border: none; 
 
    height: 30px; 
 
    width: 0px; 
 
    color: black; 
 
    transition: width .55s ease, background-color .55s ease; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
 
     <a class="quick-search-container"> 
 
      <span class="icon"> 
 
       <i (click)="initQuickSearch()" class="fa fa-search"></i> 
 
      </span> 
 
      <input type="search" id="search" placeholder="Search..."> 
 
      <span class="selector"> 
 
       <select class="quick-search-selector" id="selector"> 
 
       <option>VIN</option> 
 
       <option>Make</option> 
 
       <option>Model</option> 
 
       <option>Cow</option> 
 
       </select> 
 
      </span> 
 
      </a>

Answer 1

entrée wrap Juste et sélectionnez les boîtes dans un conteneur et définissez des animations sur elle, voir la démo simplifiée en utilisant FlexBox ci-dessous. Vous pouvez ajuster le style selon vos besoins.

jsFiddle

html { 
 
    background-color: rgba(64, 124, 165, 1); 
 
} 
 
.quick-search-container { 
 
    position: relative; 
 
    width: 250px; 
 
    display: flex; 
 
    justify-content: flex-end; 
 
    align-items: center; 
 
    border: 1px solid; 
 
} 
 
.input-select { 
 
    width: 0; 
 
    overflow: hidden; 
 
    transition: width 1s; 
 
    display: flex; 
 
} 
 
.quick-search-selector { 
 
    width: 30%; 
 
    height: 30px; 
 
} 
 
.quick-search-input { 
 
    width: 70%; 
 
    -webkit-appearance: none; 
 
    outline: 0; 
 
    height: 30px; 
 
} 
 
.quick-search-container:hover .input-select { 
 
    width: 100%; 
 
} 
 
.quick-search-button { 
 
    position: absolute; 
 
    right: 0; 
 
    top: 0; 
 
    bottom: 0; 
 
    font-size: 16px; 
 
    background: none; 
 
    border: 0; 
 
    outline: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"> 
 
<a class="quick-search-container"> 
 
    <span class="input-select"> 
 
    <select class="quick-search-selector" id="selector"> 
 
     <option>VIN</option> 
 
     <option>Make</option> 
 
     <option>Model</option> 
 
     <option>Cow</option> 
 
    </select> 
 
    <input type="search" class="quick-search-input" placeholder="Search..." id="search"> 
 
    </span> 
 
    <button class="quick-search-button"> 
 
    <i class="fa fa-search"></i> 
 
    </button> 
 
</a>