<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-animate.js"></script>
<script>
var app = angular.module('app', ['ngAnimate']).controller('Ctrl', function($scope) {$scope.total = true;})
</script>
<style>
.sub_window.ng-hide-remove {
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
transition-delay: 0.5s;
opacity: 0;
}
.sub_window.ng-hide-remove.ng-hide-remove-active {
opacity: 1;
}
</style>
</head>
<body ng-app="app" ng-controller='Ctrl'>
<div id="sub_buttons">
<ul>
<li ng-mouseenter="two = true; one = false" ng-mouseleave=" two = false; one = true">Show 2</li>
<li ng-mouseenter="three = true; one = false" ng-mouseleave=" three = false; one = true">Show 3</li>
<li ng-mouseenter="four = true; one = false" ng-mouseleave=" four = false; one = true">Show 4</li>
</ul>
</div>
<div class="sub_window" ng-show="one">
Text 1 here
</div>
<!-- Alternatives-->
<div class="sub_window" ng-show="two">
Text 2 here!
</div>
<div class="sub_window" ng-show="three">
Text 3 here!
</div>
<div class="sub_window" ng-show="four">
Text 4 here!
</div>
</body>
</html>
// Code goes here
/* Styles go here */
.sub_window.ng-show {
-webkit-transition: 0.5s linear all;
transition: 0.5s linear all;
transition-delay: 0.5s;
opacity: 0;
}
.sub_window.ng-hide-remove.ng-show-active {
opacity: 1;
}