Плавный переход

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

Угловые анимации определены в метаданных @Component, как показано здесь:

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

Затем вам нужно определить триггеры, которые добавляются к HTML-элементам, которые вы хотите анимировать. Например:

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'))
  ])
]

Затем вы прикрепляете эти анимации к элементу html, используя синтаксис [@triggerName], как показано здесь:

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

Вы должны прочитать об угловой анимации здесь:

https://angular.io/guide/animations

Эта информация должна направить вас в правильном направлении. Я постараюсь найти время, чтобы записать ваш точный ответ, но вы знаете поговорку: дайте человеку рыбу, и он не будет голоден в течение дня, научите его ловить рыбу, и он не будет голоден всю жизнь.

Желаю вам удачи!

Счастливого обучения !!

Answer 2

Вы можете использовать свойство перехода 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;}