css - 平稳过渡

Question

我有一个用 Angular 编写的应用程序。下面是模板和 TS 文件的代码:

HTML:

<button class="btn btn-primay" (click)="changeColumnsSize()"> change column sizes</button>
  <div class="row">
    <div id="leftColumn" class="col-sm-{{leftColumnSize}}" style="background-color:lavender;">
      .col-sm-8     
    </div>
    <div id ="rightColumn" *ngIf="this.state===true" class="col-sm-{{rightColumnSize}}" style="background-color:lavenderblush;">
      .col-sm-4
    </div>
  </div>

TS:

import { Component } from '@angular/core';

@Component({
  selector: 'app-box',
  templateUrl: './box.component.html',
  styleUrls: ['./box.component.css']
})
export class BoxComponent {

  leftColumnSize: number = 8;
  rightColumnSize: number = 4;
  colDifference: number = 2;
  state: boolean = false;

  constructor() { }

  changeColumnsSize(){
    if (this.state===false)
      this.state = true;
    else
      this.state = false;

    if(this.state===true) {
      this.leftColumnSize-=this.colDifference;
      this.rightColumnSize+=this.colDifference;
    }
    else if (this.state===false) {
      this.leftColumnSize+=this.colDifference;
      this.rightColumnSize-=this.colDifference;
    }
  }
}

通过单击按钮，leftColumnSize 的大小减小到 8，rightColumn 以 4 大小呈现。再次单击它，leftColumnSize 重置并且 rightColumn 被删除。但我希望这一切以一种平滑的方式发生，一种过渡或动画。你能帮我写相关的CSS代码吗？

Answer 1

您可以使用 CSS 过渡属性:

例如:

.col-sm-8 {
  width: 60%;
  transition: width .5s ease;
}

.col-sm-4 {
  width: 40%;
  transition: width .5s ease;
}

.col-sm-2 {
  width: 20%;
  transition: width .5s ease;
}

您还可以通过为动画元素创建通用的 .transition 类来优化它。

.transition {transition: width .5s ease;}