AngularJS: Slide-up and Slide-down

HTML

<div  ng-controller="YourCtrl">

  <a href="#" ng-click="slideF();">click me</a>

  <div class="last-action-container">

    <div class="animate-last-action" 
         ng-class="{'slide-up': slideSensor, 'slide-down': !slideSensor}" 
         ng-click="slideF();"> Hello
    </div>
    <div class="lastAction"></div>

  </div>


 
</div>

CSS

.last-action-container{
  overflow:hidden;
  border:1px solid green;
/*   height:155px;
  width:180px; */
  position:relative;
}

.lastAction {
  position:absolute;
  height:65px;
  width:100%;
  bottom:0;  
  background-color: red;
}

.animate-last-action {
  background: grey; /* sets color of viewable area */
  width: 180px; /* sets width of viewable area */
  height:55%; /* sets height of viewable area. Less than 100% removes from bottom */
  
  /* required for animation to work.*/
  position:absolute;
  -webkit-transform: translate3d(0,0,0); /* Chrome, Safari, Opera */
  transform: translate3d(0,0,0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-perspective: 1000;
  perspective: 1000;
}

.animate-last-action.slide-down {
  -webkit-animation:0.5s slide-down normal forwards;
  animation:0.5s slide-down normal forwards;
}

.animate-last-action.slide-up {
  -webkit-animation:0.5s slide-up normal forwards;
  animation:0.5s slide-up normal forwards;
}

/* Chrome, Safari, Opera */
@-webkit-keyframes slide-up
{
  0%   {top:80%;}
  100%  {top:0;}
}

/* Standard syntax */
@keyframes slide-up
{
  0%   {top:80%;}
  100%  {top:0;}
}

/* Chrome, Safari, Opera */
@-webkit-keyframes slide-down
{
  0%  {top:0;}
  100%   {top:80%;}
}

/* Standard syntax */
@keyframes slide-down
{
  0%  {top:0;}
  100%   {top:80%;}
}

JavaScript

'use strict';
var app = angular.module('ngAnimate', []);
app.controller('YourCtrl', ['$scope', function($scope) {
	$scope.slideF = function(){
  	console.log('slideF');
  	$scope.slideSensor = !$scope.slideSensor;
  }
  
  //$scope.slideF();
}]);