扩展外部按钮单击时的搜索栏答案

【问题标题】：Expanding Search Bar on External Button Click扩展外部按钮单击时的搜索栏
【发布时间】：2019-05-09 14:33:10
【问题描述】：

我希望在单击外部按钮（图标）时扩展和转换搜索输入，而不仅仅是在单击时出现/消失。一个人会怎么做。使用纯 CSS 或 Angular 7 动画方式。我是第一次学习 Angular。

谢谢

我希望它做一些类似于此站点上的搜索栏的事情。

到目前为止我所拥有的 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 // 我的搜索栏的基本 scss

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

【问题讨论】：

仅供参考，您的 sn-ps 不运行：Uncaught SyntaxError: Unexpected token export

标签： css angular animation angular7 searchbar

【解决方案1】：

您正在添加隐藏和显示类。因此，在这些类中定义最大高度并在将“移动”的项目上显示块应该允许您的过渡工作。例如：

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

【讨论】：

所以这有帮助，但这不是我想要的。但是，您的回答确实帮助我自己弄清楚，感谢您的指导。
@SantiagoDeleon 很高兴我能提供一些帮助，更高兴你把它理顺了！

【解决方案2】：

我为任何有类似困境的人解决了这个问题。我做的是这个。

.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 添加到输入元素是必不可少的。

感谢大家的帮助！

【讨论】：