时间戳

首页 > 解决方案 > Angular - 在其他 div 滑出/滑入时使 div 增长/缩小

angular - Angular - 在其他 div 滑出/滑入时使 div 增长/缩小

问题描述

我是角度和角度动画的新手，我遇到了问题。

这是我的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

标签： angularanimationangular-animations

解决方案

就像在 css 中一样，Angular 动画不适用于display属性。'Center' div 调整大小跳跃是因为display:none. 它的动画应该应用于width属性（例如）才能工作：

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

演示

推荐阅读