Нежелательное поведение с переходом CSS - PullRequest
Новая
       11

Нежелательное поведение с переходом CSS

0 голосов
/ 14 сентября 2018

У меня есть угловое приложение. Его HTML файл содержит div со строкой класса, которая сама содержит два div s с классом col. При нажатии на кнопку размер столбцов изменяется: 

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

Для плавного изменения размера я добавил свойство перехода в классы col в файле CSS : 

.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, а затем перемещается в правильное место.

Можете ли вы помочь мне решить это? Я предпочитаю решать эту проблему без использования угловой анимации.

1 Ответ

0 голосов
/ 14 сентября 2018

Это потому, что в v4 макет сетки основан не на width свойстве (и блочной модели), а на
flex-basis + max-width (и модель flexbox).

Вам необходимо установить 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>
...