css - Angular Transform Scale - 删除空白

Question

我正在做一个需要动态缩小多个大表的元素。我通过使用 transform: scale 实现了这一点。这是我试图在 stackblitz 中实现的一个简单版本。

StackBlitz - Scaling Demo

问题是当我缩小时底部有空白区域。在此之后我有文本和附加表格。如何删除这个空白？我知道之前有人问过这个问题，但我正在努力寻找一个特别适用于 Angular 工作解决方案。

HTML

<h1>Transform</h1>
<button (click)="setScale1(1)">Original</button>
<button (click)="setScale1(0.5)">Scale 50%</button>
<button (click)="setScale1(0.25)">Scale 25%</button>

    <div style="transform-origin:0 0;" [style.transform]="'scale('+scale1+')'">
      <table style="width:130%;background-color:#D3D3D3;">
        <tr>
          <th>Firstname</th>
          <th>Lastname</th> 
          <th>Age</th>
          <th>Sex</th>
        </tr>
        <tr>
          <td>Jill</td>
          <td>Smith</td> 
          <td>50</td>
          <td>F</td>
        </tr>
        <tr>
          <td>Eve</td>
          <td>Jackson</td> 
          <td>94</td>
          <td>F</td>
        </tr>
        <tr>
          <td>Toby</td>
          <td>Smith</td> 
          <td>50</td>
          <td>M</td>
        </tr>
        <tr>
          <td>Tom</td>
          <td>Jackson</td> 
          <td>66</td>
          <td>M</td>
        </tr>
      </table>
    </div>
    <div>I would like this text to be directly after the blue container like when at 100% scale</div>
    <br>
    <button (click)="setScale2(1)">Original</button>
    <button (click)="setScale2(0.5)">Scale 50%</button>
    <button (click)="setScale2(0.25)">Scale 25%</button>
    <div style="transform-origin:0 0;" [style.transform]="'scale('+scale2+')'">
      <table style="width:130%;background-color:#D3D3D3;">
        <tr>
          <th>Company</th>
          <th>Type</th> 
          <th># Of Employees</th>
        </tr>
        <tr>
          <td>ABC Company</td>
          <td>Customer</td> 
          <td>50</td>
        </tr>
        <tr>
          <td>Other Company</td>
          <td>Customer</td> 
          <td>4</td>
        </tr>
        <tr>
          <td>Delta Force</td>
          <td>Supplier</td> 
          <td>100</td>
        </tr>
        <tr>
          <td>Alpha Rig</td>
          <td>Supplier</td> 
          <td>33</td>
        </tr>
      </table>
    </div>
    <div>I would like this text to be directly after the blue container like when at 100% scale</div>

JavaScript

import {Component} from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
/**
 * @title Expansion panel as accordion
 */
@Component({
  selector: 'expansion-steps-example',
  templateUrl: 'expansion-steps-example.html',
  styleUrls: ['expansion-steps-example.css']
})
export class ExpansionStepsExample {
  scale1: string = '1';
  scale2: string = '1';


  setScale1(value: string): void {
    this.scale1 = value;
  }
  setScale2(value: string): void {
    this.scale2 = value;
  }
}

Answer 1

在这里使用 Tallboy 推荐的文章是任何感兴趣的人的完整解决方案。建议的解决方案是:

已更新 stackblitz Working Solution

1. 将表格包裹在容器中，并在比例变化时动态调整容器的高度。

2. 我通过给表格分配一个id来获取高度

3. 通过document.getElementById获取高度

4. 按比例因子将容器高度 (clientHeight) 的倍数更改

HTML

转换

原来的 比例 25% 比例 50% 比例 150% 名 姓 年龄 性别 吉尔 史密斯 50 F 前夕 jackson 94 F 托比 史密斯 50 米 汤姆 jackson 66 米 我希望此文本直接位于表格之后，就像在 100% 比例时一样
原来的 比例 25% 比例 50% 公司 类型 # 员工 ABC公司 顾客 50 其他公司 顾客 4个 三 Angular 洲部队 供应商 100 阿尔法钻机 供应商 33 我希望此文本直接位于表格之后，就像在 100% 比例时一样

Javascript

import {Component} from '@angular/core';
import { animate, state, style, transition, trigger } from '@angular/animations';
/**
 * @title Expansion panel as accordion
 */
@Component({
  selector: 'expansion-steps-example',
  templateUrl: 'expansion-steps-example.html',
  styleUrls: ['expansion-steps-example.css']
})
export class ExpansionStepsExample {
  scale1: string = '1';
  scale2: string = '1';

  height1: number;
  height2: number;


  setScale1(value: string): void {
    this.scale1 = value;
    this.setHeight('table1');   

  }
  setScale2(value: string): void {
    this.scale2 = value;
    this.setHeight('table2');   
  }
  setHeight(id: string): void {
      if (id === 'table1') {
        this.height1 = document.getElementById(id).clientHeight*parseFloat(this.scale1);
      }
      if (id === 'table2') {
        this.height2 = document.getElementById(id).clientHeight*parseFloat(this.scale2);
      }
  }
}