Question

我希望在单击外部按钮（图标）时展开并转换搜索输入，而不是仅在单击时出现/消失。人们将如何做到这一点。使用纯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;
}

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

Answer 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是必不可少的。

感谢大家的帮助！

外部按钮上的展开搜索栏单击

2 个答案: