Skip to content

Instantly share code, notes, and snippets.

@fabiobiondi

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

Created December 31, 2013 09:06
Show Gist options
  • Save fabiobiondi/8194303 to your computer and use it in GitHub Desktop.
Save fabiobiondi/8194303 to your computer and use it in GitHub Desktop.
Download ZIP
A Pen by Fabio Biondi.
Raw
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>
Raw
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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment