Angular: Sync animation between two elements
http://angularjs.org/
HTML
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.0-rc.2/angular-animate.min.js"></script>
<div ng-app='myApp'>
<div id="main" ng-controller="MyCtrl">
<div class="box box-a" ng-click="doIt()" ng-class="{'grow':drawerOpen}"></div>
<div class="box box-b" ng-click="doIt()" ng-class="{'grow':drawerOpen}"></div>
</div>
</div>
CSS
#main{
display:block;
border: 1px solid black;
height: 500px;
}
.box {
height:100px;
width:100px;
margin-right:10px;
float:left;
-webkit-transition:0.5s linear all;
transition:0.5s linear all;
}
.box-a{
background:red;
}
.box-b{
background:lightblue;
}
.grow{
height:80%;
}
JavaScript
var myApp = angular.module('myApp', ['ngAnimate']);
myApp.controller('MyCtrl', ['$scope', function ($scope) {
$scope.drawerOpen = false;
$scope.doIt = function(){
$scope.drawerOpen = !$scope.drawerOpen;
};
}]);
myApp.animation('.grow', function() {
return {
enter : function(element, done) {
console.log('enter');
return function(cancelled) {
/* this (optional) function is called when the animation is complete
or when the animation has been cancelled (which is when
another animation is started on the same element while the
current animation is still in progress). */
if(cancelled) {
jQuery(element).stop();
}
}
},
leave : function(element, done) { done(); },
move : function(element, done) { console.log('move');done(); },
beforeAddClass : function(element, className, done) { done(); },
addClass : function(element, className, done) { console.log('addClass');done(); },
beforeRemoveClass : function(element, className, done) { done(); },
removeClass : function(element, className, done) { done(); },
allowCancel : function(element, event, className) {}
};
});
//myApp.directive('myDirective', function() {});
//myApp.factory('myService', function() {});