mousemove

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.2.28" data-semver="1.2.28" src="https://code.angularjs.org/1.2.28/angular.js"></script>
    <script data-require="angular-animate@1.2.28" data-semver="1.2.28" src="https://code.angularjs.org/1.2.28/angular-animate.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    
    <div class="box" ng-app="myAnimate" ng-controller="animateController">
    <div class="mousemove" ng-mousemove="myToggle()" ></div>
    <div class="animateShow" ng-show="loading"></div>

</div>
    
  </body>
</html>

var myAnimate = angular.module('myAnimate', ['ngAnimate']);

myAnimate.controller('animateController', function($scope, $timeout) {

	$scope.myToggle = function() {
		if ($scope.loading) {
			$timeout.cancel($scope.loading);
		}

		$scope.loading = $timeout(
			function() {
				$scope.loading = false;
			}, 2000);
	}
});

/* Styles go here */
.box{
    height:100px;
    overflow: hidden;
    position:relative;
}
.mousemove{
    height: 100px;
    width: 500px;
    background-color: #999;
}
.animateShow{
    height: 20px;
    width: 500px;
    background-color: #ddd;
    opacity:1;
    position: absolute;
    bottom: 0px;
    transition:all linear 0.5s;
    -moz-transition:all linear 0.5s;
    -webkit-transition:all linear 0.5s;
    -o-transition:all linear 0.5s;
}
.animateShow.ng-hide {
    opacity:0;
    position: absolute;
    bottom: -20px;
}