Angular - 让 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;
      }
    }

我的less文件：

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

我希望我可以上传代码 sn-p 但我不知道如何为 angular 7 执行此操作。

我希望你能理解我的问题和我想要什么，对不起我的英语并提前感谢！

编辑：

现场示例：https://angular-yej9sz.stackblitz.io/ | https://stackblitz.com/edit/angular-yej9sz

Answer 1

我已经在一定程度上修改了您的一些代码以实现所需的输出。您可以调整这些部分。

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

Answer 2

与 css 一样，Angular 动画不适用于 display 属性。由于display:none，'中心' div 调整大小跳跃。它的动画应该应用于width 属性（例如）才能工作：

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

DEMO