AngularJS Tutorial For Beginners: ngClass animation

Create index.html

<!doctype html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>angularjs animation in class</title>
  <link href="style.css" rel="stylesheet" type="text/css">

.css-class,
.css-class-add.css-class-add-active {
  color: #FFFFFF;
  font-size:3em;
}

.css-class-remove.css-class-remove-active {
  font-size:1.0em;
  color:black;
}
.newbox{
background:#666666;
margin:auto;
height:200px;

padding:10px;
}
.button{
background:#0099FF;
color:#0000FF;
text-shadow:2px 1px 1px #fff;
padding:10px;
text-align:center;
font-weight:bold;
cursor:pointer;

}
  </style>

</head>
<body ng-app="ngAnimate">
  <p>
  <input type="button" value="Zoom" class="button" ng-click="newbox='css-class'">
  <input type="button" value="clear" class="button" ng-click="newbox=''">
  <br>
  <div class="newbox">
  <div ng-class="newbox">this is Angularjs example<br> click on Zoom it will show big font<br>when you lick on clear it will be on their Normal size.</div></div>
</p>
</body>
</html>

Monday, 13 April 2015

ngClass animation

Create index.html

No comments:

Post a Comment