Css 平稳过渡

我有一份用英语写的申请书。下面是模板和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>

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，

righcolumn

的大小为4。再次单击它，

leftColumnSize

重置并删除

righcolumn

。 但我希望这一切以一种平稳的方式发生，一种过渡或动画。

---

你能帮我写一下相关的CSS代码吗

您可以使用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;
}

animations: [
  trigger('heroState', [
    state('inactive', style({
      backgroundColor: '#eee',
      transform: 'scale(1)'
    })),
    state('active',   style({
      backgroundColor: '#cfd8dc',
      transform: 'scale(1.1)'
    })),
    transition('inactive => active', animate('100ms ease-in')),
    transition('active => inactive', animate('100ms ease-out'))
  ])
]

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

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

---

您可以使用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;
}

animations: [
  trigger('heroState', [
    state('inactive', style({
      backgroundColor: '#eee',
      transform: 'scale(1)'
    })),
    state('active',   style({
      backgroundColor: '#cfd8dc',
      transform: 'scale(1.1)'
    })),
    transition('inactive => active', animate('100ms ease-in')),
    transition('active => inactive', animate('100ms ease-out'))
  ])
]

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

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

---

角度动画在@Component元数据中定义，如下所示：

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
  animations: [
    // animation definitions here
  ]
})

然后需要定义触发器，这些触发器被添加到要设置动画的html元素中。例如：

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

animations: [
  trigger('heroState', [
    state('inactive', style({
      backgroundColor: '#eee',
      transform: 'scale(1)'
    })),
    state('active',   style({
      backgroundColor: '#cfd8dc',
      transform: 'scale(1.1)'
    })),
    transition('inactive => active', animate('100ms ease-in')),
    transition('active => inactive', animate('100ms ease-out'))
  ])
]

然后使用

[@triggerName]

语法将这些动画附加到html元素，如下所示：

<ul>
  <li *ngFor="let hero of heroes"
        [@heroState]="hero.state"
        (click)="hero.toggleState()">
      {{hero.name}}
  </li>
</ul>

{{hero.name}

您应该在此处阅读角度动画：

这些信息会让你走上正确的方向。我想花点时间写下你的确切答案，但你知道有句谚语，给一个人一条鱼，他一天都不会饿；教他如何钓鱼，他一辈子都不会饿

祝你好运

---

快乐学习

角度动画在@Component元数据中定义，如下所示：

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
  styleUrls: ['./home.component.scss'],
  animations: [
    // animation definitions here
  ]
})

然后需要定义触发器，这些触发器被添加到要设置动画的html元素中。例如：

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

animations: [
  trigger('heroState', [
    state('inactive', style({
      backgroundColor: '#eee',
      transform: 'scale(1)'
    })),
    state('active',   style({
      backgroundColor: '#cfd8dc',
      transform: 'scale(1.1)'
    })),
    transition('inactive => active', animate('100ms ease-in')),
    transition('active => inactive', animate('100ms ease-out'))
  ])
]

然后使用

[@triggerName]

语法将这些动画附加到html元素，如下所示：

<ul>
  <li *ngFor="let hero of heroes"
        [@heroState]="hero.state"
        (click)="hero.toggleState()">
      {{hero.name}}
  </li>
</ul>

{{hero.name}

您应该在此处阅读角度动画：

这些信息会让你走上正确的方向。我想花点时间写下你的确切答案，但你知道有句谚语，给一个人一条鱼，他一天都不会饿；教他如何钓鱼，他一辈子都不会饿

祝你好运

快乐学习