将一个 div 从底部滑到另一个带有角度动画的 div 下方

Question

正如您在下面的屏幕截图中所见，我的页面底部有一个标签。当我单击它时，我希望它使用角度动画在包含“测试”的<div> 下方滑动。问题是，页面大小应该是响应式的，因此我不能使用 px 值。我也尝试了百分比，但该值是指我的 tab-div，而不是整体高度。

Screenshot

我的组件：

@Component({
   selector: 'app-test',
   templateUrl: './test.component.html',
   styleUrls: ['./test.component.scss'],
   animations: [
      trigger('tabState', [state('default', style({
            transform: 'translateY(0)'
            })
         ),
         state('open', style({
            transform: 'translateY(-100%)'
         })),
         transition('default <=> open', animate(500))
      ])
   ]})

export class TestComponent {
   state = 'default';
   onComeIn() {
      this.state === 'default' ? this.state = 'open' : this.state = 'default';
   }
}

我的 HTML：

<div class="mainContainer">
   <mat-toolbar color="primary">
      <div class="d-flex align-items-center justify-content-between">
         <span>Test</span>
      </div>
   </mat-toolbar>

   <div class="mainContentContainer">
      <div class="d-flex flex-column" style="height: 100%">
      <div>content</div>
   <div class="mt-auto">
      <div class="tabContainer" [@tabState]="state">
         <div class="tab" (click)="onComeIn()">Tab</div>
      </div>
   </div>
</div>

最后是css：

.tab {
   box-sizing: border-box;
   height: 4.2em;
   width: 33%;
   background-color: white;
   padding: 1em 1.2em 0.45em 1.2em;
   border-radius: 0.5em 0.5em 0 0;
   box-shadow: 0 0.05em #b7b7b7;
}

.mainContainer {
   width: 100%;
   display: flex;
   flex-direction: column;
   position: absolute;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
}

.mainContentContainer {
   flex: 1;
   background-color: #455864;
}

Answer 1

这个问题更多是关于 css 的：

我将tabContainer 类的初始值更改为：

.tabContainer {
  position: fixed;
  bottom: 0;
  width: 100%;
}

然后在动画定义中，去掉bottom，添加top一个：

state('open', style({
  bottom: 'initial',
  top: '20px'
})),

Here is the running example in editor.