如何为PrimeNG TabView创建自定义标签滑块动画？

你原来的代码无法实现滑动效果，是因为直接给border-bottom添加过渡只能修改边框的颜色、粗细等样式属性，没法改变边框的位置，自然做不出左右滑动的效果。要实现类似Angular Material的滑块动画，需要用独立元素（或伪元素）模拟滑块，通过调整它的位置和宽度配合过渡来实现。

下面是两种可行的实现方案：

方案一：使用额外DOM元素作为滑块 #

1. 修改组件HTML #

<p-tabView #tabView (onChange)="onTabChange($event)">
  <!-- 滑块元素 -->
  <div class="tab-slider" #tabSlider></div>
  <p-tabPanel header="标签页1">内容1</p-tabPanel>
  <p-tabPanel header="标签页2">内容2</p-tabPanel>
  <p-tabPanel header="标签页3">内容3</p-tabPanel>
</p-tabView>

2. 添加CSS样式 #

.p-tabview-nav {
  position: relative;
  margin-bottom: 0; /* 移除默认边距，让滑块紧贴标签栏底部 */
}

.p-tabview-nav-link {
  border-bottom: none !important; /* 去掉PrimeNG默认的底部边框 */
  padding-bottom: 0.5rem; /* 调整内边距，避免滑块遮挡文字 */
}

.p-tabview-nav-item.p-highlight .p-tabview-nav-link {
  color: #007ad9; /* 设置选中标签的文字颜色 */
}

.tab-slider {
  position: absolute;
  bottom: 0;
  height: 2px;
  background-color: #007ad9; /* 滑块颜色，可自定义 */
  transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1); /* 过渡动画曲线 */
}

3. 组件逻辑代码 #

import { Component, ViewChild, ElementRef } from '@angular/core';
import { TabView } from 'primeng/tabview';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  @ViewChild('tabView') tabView: TabView;
  @ViewChild('tabSlider') tabSlider: ElementRef;

  ngAfterViewInit() {
    // 初始化时设置滑块到默认选中的标签位置
    const activeTab = this.tabView.tabs.find(tab => tab.selected)?.element.nativeElement.querySelector('.p-tabview-nav-link');
    if (activeTab) {
      this.updateSliderPosition(activeTab);
    }
  }

  onTabChange(event) {
    // 切换标签时更新滑块位置
    const activeTab = this.tabView.tabs[event.index].element.nativeElement.querySelector('.p-tabview-nav-link');
    this.updateSliderPosition(activeTab);
  }

  private updateSliderPosition(tabElement: HTMLElement) {
    const slider = this.tabSlider.nativeElement;
    slider.style.left = `${tabElement.offsetLeft}px`;
    slider.style.width = `${tabElement.offsetWidth}px`;
  }
}

方案二：使用伪元素（无需额外DOM） #

1. 修改组件HTML #

<p-tabView #tabView (onChange)="onTabChange($event)">
  <p-tabPanel header="标签页1">内容1</p-tabPanel>
  <p-tabPanel header="标签页2">内容2</p-tabPanel>
  <p-tabPanel header="标签页3">内容3</p-tabPanel>
</p-tabView>

2. 添加CSS样式 #

.p-tabview-nav {
  position: relative;
  margin-bottom: 0;
  /* 定义CSS变量控制滑块位置和宽度 */
  --slider-left: 0;
  --slider-width: 0;
}

.p-tabview-nav-link {
  border-bottom: none !important;
  padding-bottom: 0.5rem;
}

.p-tabview-nav-item.p-highlight .p-tabview-nav-link {
  color: #007ad9;
}

/* 用伪元素做滑块 */
.p-tabview-nav::after {
  content: '';
  position: absolute;
  bottom: 0;
  height: 2px;
  background-color: #007ad9;
  left: var(--slider-left);
  width: var(--slider-width);
  transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
}

3. 组件逻辑代码 #

import { Component, ViewChild } from '@angular/core';
import { TabView } from 'primeng/tabview';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponent {
  @ViewChild('tabView') tabView: TabView;

  ngAfterViewInit() {
    const activeTab = this.tabView.tabs.find(tab => tab.selected)?.element.nativeElement.querySelector('.p-tabview-nav-link');
    if (activeTab) {
      this.updateSliderStyle(activeTab);
    }
  }

  onTabChange(event) {
    const activeTab = this.tabView.tabs[event.index].element.nativeElement.querySelector('.p-tabview-nav-link');
    this.updateSliderStyle(activeTab);
  }

  private updateSliderStyle(tabElement: HTMLElement) {
    const navElement = this.tabView.nav.nativeElement;
    navElement.style.setProperty('--slider-left', `${tabElement.offsetLeft}px`);
    navElement.style.setProperty('--slider-width', `${tabElement.offsetWidth}px`);
  }
}

两种方案都能实现根据标签切换方向自动左右滑动的底部滑块效果，你可以根据自己的偏好选择。

内容的提问来源于stack exchange，提问作者Benjamin Bajic