Ng-Style-8

 

In this example of Ng-Style, Clicking on Run button will apply the animation using style or you can say CSS. See the output:

 
 
 
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Welcome to LearnKode - A code learning platform</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> </head> <body ng-app=""> <div class="container"> <div class="row"> <div class="col-md-12"> <div class="row"> <div class="col-md-12"> <button class="btn btn-success" ng-click="style1={'margin-left':'500px','background-color':'lightgreen', 'transition':'all 5s ease-out'}; style2={'margin-left':'400px','background-color':'lightblue','transition':'all 5s ease-out'}; style3={'margin-left':'300px','background-color':'lightred','transition':'all 5s ease-out'}; style4={'margin-left':'200px','background-color':'lightmaroon','transition':'all 5s ease-out'}"> Run </button> </div> </div> <div class="row text-center"> <div class="col-md-12"> <div class="row"> <div class="col-md-2"></div> <div class="col-md-8"> <div ng-style="style1" style="height:100px;width:100px;background-color:tomato;"></div> <div ng-style="style2" style="height:100px;width:100px;background-color:magenta;"></div> <div ng-style="style3" style="height:100px;width:100px;background-color:blue;"></div> <div ng-style="style4" style="height:100px;width:100px;background-color:green;"></div> </div> <div class="col-md-2"></div> </div> <br /> </div> </div> </div> </div> </div> </body> </html>
Output