CSS 过渡的不良行为答案

【问题标题】：Unwanted behavior with CSS transitionCSS 过渡的不良行为
【发布时间】：2019-02-18 17:27:46
【问题描述】：

我有一个 Angular 应用程序。它的 HTML 文件包含一个带有类行的div，它本身包含两个带有类col 的divs。通过单击按钮，列的大小会发生变化：

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

为了平滑调整大小，我在 CSS 文件中的 col 类中添加了过渡属性：

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

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

TS 文件（包含changeColumnsSize 函数）如下所示：

export class BoxComponent {
  leftColumnSize: number = 12;
  rightColumnSize: number = 0;
  colDifference: number = 4;
  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;
     }
    }
  }

但是，有一个问题。每次转换发生时，rightColumn 会出现在leftColumn 下方，然后向上移动到正确的位置。

你能帮我解决这个问题吗？我更喜欢在不使用 Angular 动画的情况下解决这个问题。

【问题讨论】：

标签： html css angular css-transitions

【解决方案1】：

这是因为在 v4 中，网格布局不是基于width 属性（和盒子模型），而是基于
flex-basis + max-width（和弹性盒子模型）。

您需要在两个属性上设置transition。或者，懒惰和错误的方式：在all。

看看它的工作原理：

function changeColSize() {
  $('.col-switcher > div').toggleClass('col-sm-4 col-sm-8')
}

.col-switcher>div {
  transition: max-width .3s cubic-bezier(.4, 0, .2, .1), 
              flex-basis .3s cubic-bezier(.4, 0, .2, .1);
}

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

<div class="container">
  <button class="btn btn-primay" onclick="changeColSize()"> change column sizes</button>
  <div class="row col-switcher">
    <div id="leftColumn" class="col-sm-8" style="background-color:lavender;">
      .col-sm-8
    </div>
    <div id="rightColumn" *ngIf="this.state===true" class="col-sm-4" style="background-color:lavenderblush;">
      .col-sm-4
    </div>
  </div>
</div>

【讨论】：