单击外部按钮展开搜索栏

Question

我想让一个搜索输入展开&单击外部按钮(图标(时的转换，而不是仅在单击时出现/消失。一个人该怎么做呢。要么使用纯CSS，要么使用Angular 7动画方式。我是第一次学习Angular。

感谢

我想让它做一些事情，就像这个网站上的搜索栏一样。

https://theother98.com/

到目前为止我拥有的东西w/Angular 7

NAV.COMPONENT.HTML//以切换隐藏或显示的搜索栏

<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//允许切换方法工作的一些JS

export class NavComponent implements OnInit {
toggleSearch: boolean = false;
constructor() { }
ngOnInit() {
}
onToggleSearch() {
this.toggleSearch = !this.toggleSearch;
}

NAV.COMPONENT.SCSS//我的搜索栏的基本scs

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

我为任何有类似困境的人找到了答案。我所做的就是这样。

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

当定义不带transform:scale((的CSS时，当将.hide添加到元素中时，输入不会完全隐藏。此外，当您添加最大高度&最大宽度，然后单击按钮显示搜索栏。。。输入不会流畅地转换，而是以一种非常不优雅的方式扩展到最大高度，然后扩展到最大宽度。最后，向输入元素添加display:block是必不可少的。

谢谢大家的帮助！

Answer 2

您正在添加隐藏和显示类。因此，在这些类中定义最大高度，并在将"移动"的项目上显示块，应该可以让您过渡到工作状态。例如：

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