使用 angular 动画将 div 从底部滑动到另一个 div 下方

Question

正如您在下面的屏幕截图中看到的，我在页面底部有一个选项卡。当我单击它时，我希望它使用 angular 动画在包含 "Test" 的 <div> 下方滑动。问题是，页面大小应该是响应式的，因此我不能使用像素值。我也试过百分比，但那个值是指我的标签-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 class 的初始值更改为：

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

然后在动画定义中，删除bottom并添加top一个：

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

Here is the running example in editor.

使用 angular 动画将 div 从底部滑动到另一个 div 下方

Slide a div from the bottom underneath another div with angular animations

html

css

typescript

angular

angular-animations