Expanding Search Bar on External Button Click - css

Question

I want to have a search input expand & transition on the click of an external button(icon) instead of just appearing/disappearing on click. How would one go about doing this. Either with pure CSS or in an Angular 7 animation way. I'm learning Angular for the first time.
Thanks
I want it to do something just like the search bar on this site.
https://theother98.com/
What I Have Thus Far w/ Angular 7
NAV.COMPONENT.HTML // in order to toggle hidden or shown searchbar
<div href="#" (click)="onToggleSearch()" class="search-icon"><i class="fa fa-search"></i></div>
<input type="text" [ngClass]="toggleSearch ? 'show' : 'hide'" name="search" placeholder="What are you looking for?">
NAV.COMPONENT.TS // some JS that allows the toggle method to work
export class NavComponent implements OnInit {
toggleSearch: boolean = false;
constructor() { }
ngOnInit() {
}
onToggleSearch() {
this.toggleSearch = !this.toggleSearch;
}
NAV.COMPONENT.SCSS // basic scss of my searchbar
input {
flex: 1;
z-index: 999;
font-size: 14px;
width: 180px;
border: none;
outline: none;
padding: 8px;
margin-right: 10px;
transition: all 0.15s ease-in-out;
}

Answer 1

I figured it out for anyone who had similar dilemma. What I did was this.
.show {
display: block;
max-width: 200px;
transform: scale(1);
}
.hide {
display: none;
max-width: 0px;
transform: scale(0);
}
input {
flex: 1;
z-index: 999;
font-size: 14px;
width: 180px;
border: none;
outline: none;
padding: 10px 8px;
margin-right: 10px;
display: block;
transition: all 0.3s ease-in-out;
}
When defining the CSS without transform:scale() the input will not be completely hidden when .hide is added to the element. Also, when you add a max height & max width and then click the button to display the searchbar... The input will not transition fluidly, instead it expands to the max height and THEN to the max width, in a very inelegant way. Finally, adding display:block to the input element is essential.
Thanks for the help everyone!

Answer 2

You are adding the classes hide and show. Therefore, having a max-height defined in those classes and a display of block on the item that will be "moving" should allow your transition to work. For example:
.hide {
max-height: 0;
}
.show {
max-height: 1000px;
}
input {
flex: 1;
z-index: 999;
font-size: 14px;
width: 180px;
border: none;
outline: none;
padding: 8px;
margin-right: 10px;
transition: all 0.15s ease-in-out;
display: block;
}