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

Question

As you can see in the screenshot below, I hava a tab on the bottom of my page. When I click on it, I want it to slide underneath the <div> containing "Test" using angular animations. The problem is, that the pagesize should be responsive and therefore I cannot use px-values. I tried percentage as well, but that value refers to my tab-div, not the overall height.

Screenshot

My component:

@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';
   }
}

My 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>

And finally the 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;
}

Is this the behavior your are trying to have ? : https://angular-yj7kej.stackblitz.io — ibenjelloun, Aug 09 '18 at 12:59
Not quite, the Tab should initially be on the bottom of the screen (which it is in my project) and then slide up, so that the border of the white tab is right underneath the "Test"-div. — Rustius, Aug 09 '18 at 13:02
Maybe this is what you are describing : https://stackoverflow-51765996.stackblitz.io ? — ibenjelloun, Aug 09 '18 at 13:15

score 0 · Accepted Answer · answered Aug 09 '18 at 13:22

0

The issue is more about css :

I changed the initial value of the tabContainer class to this :

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

Then in the animation definition, removed the bottom and added the top one :

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

Here is the running example in editor.

answered Aug 09 '18 at 13:22

ibenjelloun

7,425
2
29
53

Thank you very much, it seems to work exactly how I want it to! :) – Rustius Aug 09 '18 at 14:02

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

1 Answers1