Angular 6中点击元素时缩放聚焦并隐藏其他页面区域的实现

Hey there! 完全可以实现你想要的点击缩放聚焦+恢复的交互效果，不用依赖Zoomooz也能搞定——咱们可以用Angular自身的动画系统结合样式控制来实现，亲测适配ng2-charts的场景，下面是具体的实现方案：

1. 配置组件动画与状态变量 #

首先在组件的TS文件里定义控制聚焦状态的变量，同时注册Angular动画触发器，用来处理缩放过渡效果：

import { Component, ViewChild, HostListener } from '@angular/core';
import { trigger, state, style, animate, transition } from '@angular/animations';
import { BaseChartDirective } from 'ng2-charts';

@Component({
  selector: 'app-chart-container',
  templateUrl: './chart-container.component.html',
  styleUrls: ['./chart-container.component.css'],
  animations: [
    trigger('zoomTrigger', [
      // 正常状态样式
      state('normal', style({
        transform: 'scale(1)',
        opacity: 1,
        position: 'static',
        zIndex: 1,
        transition: 'all 0.3s ease'
      })),
      // 聚焦状态样式：固定定位居中+放大+阴影
      state('focused', style({
        transform: 'translate(-50%, -50%) scale(1.6)',
        opacity: 1,
        position: 'fixed',
        top: '50%',
        left: '50%',
        zIndex: 1000,
        boxShadow: '0 8px 32px rgba(0,0,0,0.4)',
        borderRadius: '8px'
      })),
      // 双向过渡动画
      transition('normal <=> focused', animate('350ms cubic-bezier(0.4, 0, 0.2, 1)'))
    ])
  ]
})
export class ChartContainerComponent {
  // 当前聚焦的元素ID，null表示无聚焦
  focusedElement: string | null = null;

  // 获取图表实例用于重绘
  @ViewChild('lineChart') lineChart!: BaseChartDirective;
  @ViewChild('barChart') barChart!: BaseChartDirective;

  // 切换聚焦状态
  toggleFocus(elementId: string) {
    this.focusedElement = this.focusedElement === elementId ? null : elementId;
    
    // 动画完成后触发图表重绘，避免尺寸异常
    setTimeout(() => {
      if (elementId === 'line-chart') {
        this.lineChart.chart?.resize();
      } else if (elementId === 'bar-chart') {
        this.barChart.chart?.resize();
      }
    }, 350);
  }

  // 支持ESC键退出聚焦
  @HostListener('document:keydown.escape')
  onEscapeKey() {
    this.focusedElement = null;
  }

  // 示例图表数据（根据你的实际数据替换）
  public lineChartData = [{ data: [65, 59, 80, 81, 56, 55, 40], label: 'Series A' }];
  public barChartData = [{ data: [28, 48, 40, 19, 86, 27, 90], label: 'Series B' }];
  public chartLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July'];
}

2. 编写HTML模板结构 #

在模板里给每个需要聚焦的图表容器绑定动画触发器，同时添加遮罩层和非聚焦元素的隐藏逻辑：

<!-- 聚焦时的背景遮罩，点击可退出聚焦 -->
<div 
  class="focus-overlay" 
  *ngIf="focusedElement"
  (click)="toggleFocus(focusedElement)"
></div>

<!-- 折线图容器 -->
<div 
  id="line-chart"
  class="chart-card"
  [@zoomTrigger]="focusedElement === 'line-chart' ? 'focused' : 'normal'"
  [ngClass]="{ 'blur-out': focusedElement && focusedElement !== 'line-chart' }"
  (click)="toggleFocus('line-chart')"
>
  <h3>折线图</h3>
  <canvas #lineChart 
    baseChart 
    [datasets]="lineChartData"
    [labels]="chartLabels"
    [chartType]="'line'"
    [options]="{ responsive: true }"
  ></canvas>
</div>

<!-- 柱状图容器 -->
<div 
  id="bar-chart"
  class="chart-card"
  [@zoomTrigger]="focusedElement === 'bar-chart' ? 'focused' : 'normal'"
  [ngClass]="{ 'blur-out': focusedElement && focusedElement !== 'bar-chart' }"
  (click)="toggleFocus('bar-chart')"
>
  <h3>柱状图</h3>
  <canvas #barChart 
    baseChart 
    [datasets]="barChartData"
    [labels]="chartLabels"
    [chartType]="'bar'"
    [options]="{ responsive: true }"
  ></canvas>
</div>

3. 添加基础样式控制 #

在CSS文件里定义容器基础样式、遮罩样式，以及非聚焦元素的隐藏效果：

.chart-card {
  width: 420px;
  height: 340px;
  padding: 16px;
  margin: 24px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  cursor: pointer;
  overflow: hidden;
}

/* 非聚焦元素的模糊隐藏效果 */
.blur-out {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

/* 聚焦时的背景遮罩 */
.focus-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0,0,0,0.6);
  z-index: 999;
}

方案优势 #

• 完全基于Angular原生能力，无第三方依赖，适配Angular 6版本
• 动画效果可自定义：调整缩放比例、过渡时长、阴影样式等
• 适配ng2-charts：通过重绘解决图表尺寸异常问题
• 支持ESC键和遮罩点击退出聚焦，交互体验完整

内容的提问来源于stack exchange，提问作者Manhar Sapra