代码之家 › 专栏 › 技术社区 › Ka Tech

角度变换比例-删除空白

angular css

Ka Tech · 技术社区 · 6 年前

我正在进行一个项目,需要动态地缩小多个大型表。我通过使用transform:scale实现了这一点。下面是我在stackblitz中试图实现的一个简单版本。

问题是当我缩小比例时,底部有空白。在此之后,我有文本和其他表格。如何删除此空白?我知道以前有人问过这个问题,但我正在努力找到一个有效的解决方案,特别是对于角型的。

<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;
  }
}

1 回复 | 直到 6 年前

Tallboy 6 年前

你可以用 zoom: 0.3 而不是 scale: 0.3 will affect browsers differently ,在Firefox中不起作用。

另一个解决办法是 emulate zoom with transform (demo) . 解释 here

Ka Tech 6 年前

这里使用Tallboy建议的文章是所有感兴趣的人的完整解决方案。建议的解决办法是:

Working Solution

将表格包装在容器中,并在比例更改时动态调整容器的高度。
我通过给表格分配一个id来获得高度
将高度更改为容器高度(clientHeight)乘以比例因子

HTML

使改变

起初的比例25% 比例150% 名字姓氏年龄吉尔史密斯 50 前夕杰克逊 F 托比史密斯 M 杰克逊 66 M 我想这篇文章是直接在表后,就像在100%的规模
起初的比例25% 比例50% 类型 ABC公司 50 其他公司顾客 4. 供应商 33 我想这篇文章是直接在表后,就像在100%的规模

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);
      }
  }
}