Question

如下面的屏幕快照所示，我在页面底部有一个选项卡。当我单击它时，我希望它使用角度动画在包含“测试”的<div>下滑动。问题是，页面大小应该响应，因此我不能使用px值。我也尝试过百分比，但是该值是我的tab-div，而不是总高度。

我的组件

@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.

使用角度动画从另一个div的底部滑动一个div

1 个答案: