<ons-tab>About screen transition customization when tapping

ons.bootstrap()
.controller('AppController', function($scope, $element, $timeout){
  $timeout(function(){
    $scope.tabbar.on('prechange', function(e){
      if(e.index===1){
        e.cancel();
        $scope.liftPage();
      }
    });
  });
  
  $scope.liftPage=function(){
    $element.find('.upper-page').addClass('show');
  };
  
  $scope.lowerPage=function(){
    $element.find('.upper-page').removeClass('show');
  };
});

.upper-page{
  z-index: 100000;
  background-color:#DDD;
  position:absolute;
  width: 100%;
  height —100%;
  top —100%;
  left:0;
  bottom:0;
  right:0;
  transition-duration: 0.4s;
  transition-property:top;
}
.upper-page.show{
  top:0;
}
.back-button {
  width: 100%;
  position:absolute;
  bottom:0;
  text-align:center;
}

<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/css/onsen-css-components.css"rel="stylesheet"/>
<link href="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/css/onsenui.css"rel="stylesheet"/><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/js/angular/angular.min.js"></script>
<script src="https://cdn.rawgit.com/OnsenUI/OnsenUI/1.3.8/build/js/onsenui.min.js"></script>

<div ng-controller="AppController">
  
  <ons-tabbar var="tabbar">
    <ons-tabicon="home" label="Home" page="page1.html"active="true">/ons-tab>
    <ons-tabicon="camera" label="Camara">/ons-tab>
    <ons-tabicon="gear" label="Settings" page="page3.html">/ons-tab>
  </ons-tabbar>
  
  <div class="upper-page">
    <h1>Page2.html</h1>
    <div class="back-button">
      <i class="fafa-4x fa-times"ng-click="lowerPage()">/i>
    </div>
  </div>
  
</div>

<ons-template id="page1.html">
  <ons-toolbar>/ons-toolbar>
  <h1>Page1</h1>
</ons-template>

<ons-template id="page3.html">
  <ons-toolbar>/ons-toolbar>
  <h1>Page3</h1>
</ons-template>