onclick toggle opacity using ng-click and ng-class:
<!DOCTYPE html>
<html ng-app="demo">
<head>
<style>
h1 {
font-size: 1000%;
-webkit-transition: 1s;
transition: 1s;
opacity: 1;
}
h1.fade {
-webkit-transition: 1s;
transition: 1s;
opacity: 0.2;
}
</style>
<script data-require="angular.js@1.0.7" data-semver="1.0.7" src="http://code.angularjs.org/1.0.7/angular.min.js"></script>
<script>
angular.module('demo', [
]).controller('MainCtrl', function(
$scope
){
$scope.fade = false;
});
</script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="fade = !fade">Toggle Opacity</button>
<h1 ng-class="{
fade: fade
}">Hello World!</h1>
</body>
</html>
Chk for Demo:
http://plnkr.co/edit/kKzXBtXIheVpowtPXlsT?p=preview
<!DOCTYPE html>
<html ng-app="demo">
<head>
<style>
h1 {
font-size: 1000%;
-webkit-transition: 1s;
transition: 1s;
opacity: 1;
}
h1.fade {
-webkit-transition: 1s;
transition: 1s;
opacity: 0.2;
}
</style>
<script data-require="angular.js@1.0.7" data-semver="1.0.7" src="http://code.angularjs.org/1.0.7/angular.min.js"></script>
<script>
angular.module('demo', [
]).controller('MainCtrl', function(
$scope
){
$scope.fade = false;
});
</script>
</head>
<body ng-controller="MainCtrl">
<button ng-click="fade = !fade">Toggle Opacity</button>
<h1 ng-class="{
fade: fade
}">Hello World!</h1>
</body>
</html>
Chk for Demo:
http://plnkr.co/edit/kKzXBtXIheVpowtPXlsT?p=preview
No comments:
Post a Comment