Tab-animatie met Angular

Ik neem aan dat als je dit bericht doorneemt, je een idee hebt over hoekige Framework basis HTML en CSS.

toch, laten we bij het begin beginnen, open de gewenste terminal.

npm install -g @angular/cli
ng nieuwe mijn-app
cd mijn-app
verwijder alle boilerplate-inhoud van app.component.html en bij het app TS-bestand heb ik een reeks tabbladen genomen.

<div class="main_container">
  <div class="tabs_container">
    <div
      class="tab"
      [class.active]="tab.tabId === selectedTabId"
      (click)="handelTabChange(tabRef.getBoundingClientRect());selectedTabId = tab.tabId"
      #tabRef
      *ngFor=" let tab of tabs"
    >
      {{tab.tabName}}
    </div>
  </div>
  <span #panelRef class="active_panel"></span>
</div>

hier herhaal ik de tabs-array en laat de tabs-naam zien .active_panel klasse is degene die moet worden weergegeven onder het actieve tabblad.

#tabRef takes the reference for each tab.
#panelRef reference of the active panel
(click)="handelTabChange(tabRef.getBoundingClientRect())
handelTabChange function gives the width,height and position of the clicked tab. 

Dat alles wat we nodig hebben voor de HTML, laten we nu naar TS gaan.

  @ViewChild("panelRef", { read: ElementRef })
  panelRef: ElementRef; // panel reference 
  @ViewChildren("tabRef", { read: ElementRef }) 
  tabRef: QueryList<ElementRef>; // tabs reference Query List

  ngAfterViewInit() {
    const firstChild = this.tabRef.toArray()[0];
   // I want to show the first child of the tab as selected
   // so 0th index is going to be the first one
    const firstChildPosition = 
    firstChild.nativeElement.getBoundingClientRect();
   // here I am storing the position of the first child.
    this.renderer.setStyle(
      this.panelRef.nativeElement,
      "width",
      `${firstChildPosition.width}px`
    );
   // giving same width as tab label to the active panel
    this.renderer.setStyle(
      this.panelRef.nativeElement,
      "left",
      `${firstChildPosition.left}px`
    );
   // setting same left position as the first child to panel
  }

Wanneer de pagina nu wordt geladen, zoekt deze naar het eerste tabblad en neemt het actieve paneel dezelfde breedte en linkerpositie in.

  handelTabChange(tabRef: DOMRect) {
    this.renderer.setStyle(
      this.panelRef.nativeElement,
      "left",
      `${tabRef.left}px`
    );
    this.renderer.setStyle(
      this.panelRef.nativeElement,
      "width",
      `${tabRef.width}px`
    );
  }

Een beetje hetzelfde als hierboven uitgelegd, maar nu wanneer de gebruiker op de tabbladen klikt.

.main_container {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.tabs_container {
  width: 100%;
  display: flex;
  justify-content: space-around;
}
.tab {
  font-size: 18px;
  cursor: pointer;
  margin-right: 10px;
  text-align: center;
  margin: 5px;
  transform: scale(0.95);
}
.active {
  color: gray;
  transform: scale(1);
}
.active_panel {
  position: relative;
  height: 5px;
  background-color: cyan;
  transition: all 400ms ease-in-out;
  border-radius: 10px;
}

Vereiste CSS voor deze

live link voor de demo https://angular-tab-animations-u6421j.stackblitz.io