fabiobiondi/AngularJS:-ng-class-and-css-transitions.markdown

## AngularJS:-ng-class-and-css-transitions.markdown

      
    Raw
  

              AngularJS:-ng-class-and-css-transitions.markdown
            
          
    AngularJS: ng-class and css transitions

A Pen by Fabio Biondi on CodePen.
License.

  
## index.html
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>

<body class="container" ng-app="">

<h2>Click buttons to animate</h2>
<hr>

<div class="container"
     ng-init="startAni1 = false;
              startAni2 = false;">
    <button class="btn btn-default"
            ng-click="startAni1 = !startAni1">Animation 1</button>

    <button class="btn btn-default"
            ng-click="startAni2 = !startAni2">Animation 2</button>
</div>

<hr>
<div class="container">

  <div class="box-base box1"
     ng-class="{'show-me': startAni1}">
     Box1: Hello Animations!
  </div>

  <div class="box-base box2"
     ng-class="{'move-me': startAni2}">
     Box2: Hello transitions!
  </div>

</div>


</body>

## style.css
.box-base {
    opacity:0;
    padding: 20px;
    margin: 20px;
    color: white;
    border:1px solid black;
    background: #434343;
}
.box-base.box1 {
    -webkit-transition: opacity linear 0.5s;
    transition: opacity linear 0.5s;
}

.box-base.box2 {
    -webkit-transition: all ease 0.5s;
    transition: all ease 0.5s;
    position: absolute;
    top: 200px;
    left: 100px;
    opacity:1;
}

.show-me {
    opacity:1;
}

.box-base.box2.move-me {
    top: 50px;
    left: 400px;
    opacity:1;
    background-color: red;

}
	<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
	<script src="http://code.angularjs.org/1.2.6/angular.min.js"></script>

	<body class="container" ng-app="">

	<h2>Click buttons to animate</h2>
	<hr>

	<div class="container"
	ng-init="startAni1 = false;
	startAni2 = false;">
	<button class="btn btn-default"
	ng-click="startAni1 = !startAni1">Animation 1</button>

	<button class="btn btn-default"
	ng-click="startAni2 = !startAni2">Animation 2</button>
	</div>

	<hr>
	<div class="container">

	<div class="box-base box1"
	ng-class="{'show-me': startAni1}">
	Box1: Hello Animations!
	</div>

	<div class="box-base box2"
	ng-class="{'move-me': startAni2}">
	Box2: Hello transitions!
	</div>

	</div>


	</body>
	.box-base {
	opacity:0;
	padding: 20px;
	margin: 20px;
	color: white;
	border:1px solid black;
	background: #434343;
	}
	.box-base.box1 {
	-webkit-transition: opacity linear 0.5s;
	transition: opacity linear 0.5s;
	}

	.box-base.box2 {
	-webkit-transition: all ease 0.5s;
	transition: all ease 0.5s;
	position: absolute;
	top: 200px;
	left: 100px;
	opacity:1;
	}

	.show-me {
	opacity:1;
	}

	.box-base.box2.move-me {
	top: 50px;
	left: 400px;
	opacity:1;
	background-color: red;

	}