oktatas:web:angularjs:angularjs_animacio
< AngularJS
AngularJS animáció
Egy
- index.html
<!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>
oktatas/web/angularjs/angularjs_animacio.txt · Utolsó módosítás: 2021/03/25 22:23 szerkesztette: admin