转换

Question

我正在研究需要动态缩小多个大型表的项目。我通过使用transform：scale实现此目的。这是我要尝试在Stackblitz中实现的简单版本。

问题是当我按比例缩小时，底部有空白。在此之后，我还有文字和其他表格。如何删除此空白？我知道以前已经有人问过这个问题，但我一直在努力寻找一个可行的解决方案，尤其是针对角度的解决方案。

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

您可以使用zoom: 0.3代替scale: 0.3，但是可以使用will affect browsers differently，并且在Firefox中将无法使用。

另一个解决方法是emulate zoom with transform (demo)。说明here

Answer 2

在这里使用Tallboy的建议文章是对任何有兴趣的人的完整解决方案。建议的解决方案是：

更新的stackblitz Working Solution

将表格包装在容器中，并在更改比例时动态调整容器的高度。
我通过为表格分配一个ID来获得身高
通过document.getElementById
将高度更改为容器高度（clientHeight）乘以比例因子

HTML

转换

原版的比例25％规模50％规模150％名字姓年龄性别吉尔史密斯 50 F 前夕杰克逊 94 F 托比史密斯 50 中号汤姆杰克逊 66 中号我希望此文本像在100％缩放时一样直接放在表格后面
原版的比例25％规模50％公司类型员工人数 ABC公司顾客 50 其他公司顾客 4 三角洲部队供应商 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);
      }
  }
}

角度变换比例-删除空白

2 个答案:

转换