Угловой - заставить div расти / уменьшаться, в то время как другие div выдвигаются / скользят в

Question

Я новичок в угловой и угловой анимации, и у меня возникла проблема.

Это мой HTML-код:

<div class="main">
  <div class="left" *ngIf="showLeftSide" [@slideInOutLeft]></div>
  <div class="center"></div>
  <div class="right" *ngIf="showRightSide" [@slideInOutRight]></div>
</div>
<div class="footer">
  <button (click)="toggleLeftSide()" class="btn">Toggle Left Side</button>
  <button (click)="toggleRightSide()" class="btn">Toggle Right Side</button>
</div>

Что я хочу сделать, это когда left илиright div скользит внутрь или наружу. Я хочу, чтобы center div увеличивался или уменьшался с анимацией в то же время, когда анимация скольжения продолжается (то, что я получил сейчас, это то, что после завершения анимации скольженияcenter div прыгает, чтобы заполнить свободное пространство).

Код моего компонента:

@Component({
    selector: 'app-root',
    animations: [
        trigger('slideInOutLeft', [
          transition(':enter', [
            style({transform: 'translateX(-100%)'}),
            animate('500ms', style({transform: 'translateX(0%)'}))
          ]),
          transition(':leave', [
            animate('500ms', style({transform: 'translateX(-100%)'}))
          ])
        ]),
        trigger('slideInOutRight', [
          transition(':enter', [
            style({transform: 'translateX(100%)'}),
            animate('500ms ease-in', style({transform: 'translateX(0%)'}))
          ]),
          transition(':leave', [
            animate('500ms ease-in', style({transform: 'translateX(100%)'}))
          ])
        ])
      ],
      templateUrl: './app.component.html',
      styleUrls: ['./app.component.less']
    })
    export class AppComponent {
      showLeftSide = true;
      showRightSide = true;

      toggleLeftSide() {
        this.showLeftSide = !this.showLeftSide;
      }

      toggleRightSide() {
        this.showRightSide = !this.showRightSide;
      }
    }

Мой файл меньше:

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
}

.main {
  display: flex;
  height: 95%;

  .left {
    background-color: midnightblue;
    width: 3vw;
    will-change: transform;
  }

  .center {
    background-color: tomato;
    width: 100%;
  }

  .right {
    background-color: aquamarine;
    width: 30vw;
    will-change: transform;
  }
}

.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: brown;
  width: 100%;
  height: 5%;

  .btn {
    width: 5%;
  }
}

Хотелось бы, чтобы я могзагрузить фрагмент кода, но я не знаю, как это сделать для angular 7.

Я надеюсь, вы понимаете мою проблему и что я хочу, извините за мой английский и заранее спасибо!

Редактировать:

Пример в реальном времени: https://angular -yej9sz.stackblitz.io / |https://stackblitz.com/edit/angular-yej9sz

Answer 1

Как и в css, угловые анимации не применяются к свойству display.«Центр» делит изменения размера прыжков из-за display:none.Его анимация должна применяться к свойству width (например) для работы:

  state("false", style({ width: 0, display:'none' }))

DEMO

Answer 2

Я до некоторой степени изменил ваш код для достижения желаемого результата.Вы можете настроить эту часть.

html

<div class="main">
    <div class="left" [@slideInOutLeft]="showLeftSide">
        Left
    </div>
    <div class="center" [@centerleft]="chnageCenter">Center</div>
    <div class="right"  [@slideInOutRight]="showRightSide">
        Right
    </div>
</div>
<div class="footer">
    <button (click)="toggleLeftSide()" class="btn">Toggle Left Side</button>
  <button (click)="toggleRightSide()" class="btn">Toggle Right Side</button>
</div>

компонент

 import {
  trigger,
  state,
  animate,
  transition,
  style
} from "@angular/animations";

@Component({
  selector: 'my-app',
  animations: [
    trigger("slideInOutLeft", [
      state("true", style({ width: "340px" })),
      state("false", style({ display: "none" })),
      transition("* => *", animate("300ms linear"))
    ]),
    trigger("slideInOutRight", [
      state("true", style({ width: "340px" })),
      state("false", style({ display: "none" })),
      transition("* => *", animate("300ms linear"))
    ]),
    trigger("centerleft", [
      state("true", style({ width: "calc(100% - 340px )" })),
      state("false", style({ width: "100%" })),
      transition("* => *", animate("300ms  linear"))
    ])
  ],
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
  showLeftSide = true;
  showRightSide = true;
  chnageCenter = true;

  toggleLeftSide() {
    this.showLeftSide = !this.showLeftSide;
    this.toggleCenter();
  }

  toggleRightSide() {
    this.showRightSide = !this.showRightSide;
    this.toggleCenter();
  }

  toggleCenter() {
    if (this.showRightSide || this.showLeftSide) {
      this.chnageCenter = true;
    }
    else {
      this.chnageCenter = false;
    }
  }
}

здесь вывод https://angular -cyk5vs.stackblitz.io /
И код: https://stackblitz.com/edit/angular-cyk5vs