AngularJS animáció

Egy

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS ngHide példa</title>
 
<style>
/* ngHide animation */
.doboz {
    padding: 10px;
    background-color: orange;
}
.doboz.ng-hide-add {
    transition: all linear 0.8s;
    opacity: 1;
}
.doboz.ng-hide-add-active {
    opacity: 0;
}
.doboz.ng-hide-remove {
    transition: all linear 0.8s;
    opacity: 0;
}
.doboz.ng-hide-remove-active {
    opacity: 1;
}
</style>
 
</head>
<body>
 
<h1>ngHide animáció</h1>
 
<button ng-click="disabled = !disabled">
Mehet
</button>
 
<div ng-hide="disabled" class="doboz">
Ennek az elemnek van ng-hide direktívája.
</div>
 
<script src="https://code.angularjs.org/1.8.2/angular.js"></script>
<script src="https://code.angularjs.org/1.8.2/angular-animate.js"></script>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>
 
</body>
</html>