离子固定底部div和向上滑动动画

Question

我想在离子骨架中实现以下效果。当我点击箭头时，框将向右滑动。当我单击箭头或除文本框之外的任何其他区域时，它将返回到原始位置。它应该出现在任何具有menu.html作为抽象视图的视图下。怎么可能呢？我尝试了我的第一步，但没有出现。

Plunkr here

<ion-side-menus>

  <ion-pane ion-side-menu-content>
    <ion-nav-bar class="bar-stable">
      <ion-nav-back-button class="button-clear"><i class="icon ion-chevron-left"></i> Back</ion-nav-back-button>
    </ion-nav-bar>
    <ion-nav-view name="menuContent" animation="slide-left-right"></ion-nav-view>
  </ion-pane>

  <ion-side-menu side="left">
    <header class="bar bar-header bar-stable">
      <h1 class="title">Left</h1>
    </header>
    <ion-content class="has-header">
      <ion-list>
        <ion-item nav-clear menu-close href="#/app/search">
          Search
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/browse">
          Browse
        </ion-item>
        <ion-item nav-clear menu-close href="#/app/playlists">
          Playlists
        </ion-item>
      </ion-list>
    </ion-content>
  </ion-side-menu>
</ion-side-menus>

<!-- Nothing appear -->
<div style="position: fixed; bottom: 0; height: 200px;">Text here</div>