Introduction
In my previous articles I told you about:
This article will tell you how to use ng-class with CSS3 Transition in AngularJS.
In previous article I have also used CSS but in there the classes were made that could take place in any version of CSS, in this article I will use CSS3 with the ng-class in AngularJS.
Step 1
First you need to provide the reference to AngularJS file in the head section, you can also download it and can apply it directly in your application.
<head runat="server">
<title></title>
<script src="http://code.angularjs.org/1.0.7/angular.min.js"></script>
</head>
Step 2
After providing the reference you need to work on the JavaScript of the application.
Write this code in the head section of your application:
<script>
angular.module('mod', [ ]).controller('x', function (
$scope
) {
$scope.blur = false;
});
</script>
Here I had simply created an "angular.module" and named it "mod", in this module a controller function is created named "x()".
In this function I initialized the $scope and with it a variable is used named blur, by default it is made false.
Step 3
Now I will work on the View Model of this application.
<body ng-controller="x">
<button ng-click="blur = !blur">Toggle Fade</button>
<h1 ng-class="{ blur: blur }">Hey Anubhav!!</h1>
</body>
Here the body is bound with the function "x()" using the ng-controller.
In this body I have created a button that is bound with blur using the ng-click.
Also a <h1> tag is used that is bound with blur, whatever the data provided in this blur will have the blur class that will be created in our next step.
Step 4
Now I will work on the CSS of this application and will create the blur class.
<style>
h1 {
-webkit-transition: 1s;
transition: 1s;
opacity: 1;
}
h1.blur {
-webkit-transition: 1s;
transition: 1s;
opacity: 0.2;
}
</style>
You can see that I have created two classes first for the <h1> and second for the blur in <h1>.
As you already know that for applying the CSS to the AngularJS application you need to apply the "-webkit-transition", so I had applied it in both the classes.
h1 opacity is set to 1, in other words no opacity but in "h1.blur" the opacity is set to 0.2, in other words the data will be blurred on the click of a button.
Now our application is created and can be executed.
Output
On running the application you will see the default text in h1 format:
![ngclass in angularjs]()
Now if I click on the button then the data will become faded:
![ngclass in angularjs]()
Now if I again click on the button then again the text will be shown clearly.
![ngclass in angularjs]()
The complete code of this application is as follows:
<html ng-app="mod" xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="http://code.angularjs.org/1.0.7/angular.min.js"></script>
<style>
h1 {
-webkit-transition: 1s;
transition: 1s;
opacity: 1;
}
h1.blur {
-webkit-transition: 1s;
transition: 1s;
opacity: 0.2;
}
</style>
<script>
angular.module('mod', [ ]).controller('x', function (
$scope
) {
$scope.blur = false;
});
</script>
</head>
<body ng-controller="x">
<button ng-click="blur = !blur">Toggle Fade</button>
<h1 ng-class="{ blur: blur }">Hey Anubhav!!</h1>
</body>
</html>