Felhasználói eszközök

Eszközök a webhelyen


oktatas:web:angularjs:angularjs_animacio

< AngularJS

AngularJS animáció

Egy

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS ngHide példa</title>
<link href="http://ajax.aspnetcdn.com/ajax/bootstrap/3.2.0/css/
bootstrap.css" rel="stylesheet" />
<style>
/* ngHide animation */
.ngHideSample {
    padding: 10px;
}
.ngHideSample.ng-hide-add {
    transition: all linear 0.3s;
    opacity: 1;
}
.ngHideSample.ng-hide-add-active {
    opacity: 0;
}
.ngHideSample.ng-hide-remove {
    transition: all linear 0.3s;
    opacity: 0;
}
.ngHideSample.ng-hide-remove-active {
    opacity: 1;
}
</style>
 
</head>
<body>
 
<h1>ngHide animáció</h1>
 
<button ng-click="disabled = !disabled">
Toggle ngHide animáció
</button>
 
<div ng-hide="disabled" class="ngHideSample bg-success">
Ennek az elemnek van ng-hide direktívája.
</div>
 
<script src="//ajax.googleapis.com/ajax/libs/angularjs
/1.3.0/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs
/1.3.0/angular-animate.min.js"></script>
<script>
var app = angular.module('myApp', ['ngAnimate']);
</script>
 
</body>
</html>    
oktatas/web/angularjs/angularjs_animacio.txt · Utolsó módosítás: 2019/08/22 20:27 szerkesztette: admin