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

我希望我可以上传代码段，但我不知道如何针对角度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

角度-使div增大/缩小，而其他div滑出/滑入

2 个答案: