javascript - 在没有jquery的情况下缩小一个div

Question

在我的 Angular 应用程序中，我的标题与格式一样，

-- Header --

-- Sub header --

-- Search Box --

-- Create and Search Button --

-- Scroll Div --

HTML:

<h1> Header </h1>
<h3> Sub header </h3>
<div class="search-box-wrapper">
    <input class="search-box" type="text" placeholder="search"> <br><br><br>
    <button type="button"> Create </button> &nbsp; &nbsp;
    <button type="button"> Search </button> <br><br>
</div>

<div class="scroll-div">
  <ul>
    <li> <h1> User One </h1> </li>
    <li> <h1> User Two </h1> </li>
    <li> <h1> User Three </h1> </li>
    <li> <h1> User Four </h1> </li>
    <li> <h1> User Five </h1> </li>
    <li> <h1> User Six </h1> </li>
    <li> <h1> User Seven </h1> </li>
    <li> <h1> User Eight </h1> </li>
    <li> <h1> User Nine </h1> </li>
    <li> <h1> User Ten </h1> </li>
     </ul>
  </div> 

CSS:

.search-box {
   border-radius: 25px;
    border: 5px solid #000;
    padding: 10px;
    width: 90%;
}

.scroll-div {
   height: calc(100vh - 400px);
   overflow: scroll;
}

和工作堆栈 Blitz https://stackblitz.com/edit/angular-vhnt8q

我这里有一个 div，它的类名是 scroll-div，其中的列表项是可滚动..

如果我开始滚动，那么我需要缩小search-wrapper(创建和搜索按钮被隐藏)..

再次滚动到向上点然后它应该是正常的..

预期的输出类似于谷歌搜索..

初始搜索结果会是这样的，

而在滚动开始时它会像这样收缩，

以同样的方式我需要在滚动开始时隐藏创建和搜索按钮并只显示搜索框(缩小)并且在滚动顶部再次需要显示创建和搜索按钮..

请帮助我实现预期的结果没有jquery ..

任何 Angular 方式的结果都会对我更有帮助..

Answer 1

要隐藏和显示 元素，您可以通过元素 id

获得

在 .html 和 .ts 文件上使用事件方法添加以下函数:

html:(scroll)="scroll($event.target.value) 用于检测滚动

:

scroll(val) {
    let scroll = document.getElementById('scroll');

    if (scroll.scrollTop == 0) {
      this.isShow = 'show';
    } else {
      this.isShow = 'hide';
    }
  }

检查以下 stackblitz fork

---

添加需要导入的动画:

import {
    trigger,
    state,
    style,
    animate,
    transition
} from '@angular/animations';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';

然后添加

 animations: [
     trigger('toggleHeight', [
            state('hide', style({
                height: '0px',
                opacity: '0',
                overflow: 'hidden',
                // display: 'none'
            })),
            state('show', style({
                height: '*',
                opacity: '1',
                // display: 'block'
            })),
            transition('hide => show', animate('200ms ease-in')),
            transition('show => hide', animate('200ms ease-out'))
        ])
    ],

不要忘记包括以下内容:从'@angular/platform-b​​rowser/animations'导入{BrowserAnimationsModule}；和 BrowserAnimationsModule 在模块 @NgModule import 上

有关 Angular 信息的更多信息，您可以查看 here/demo