Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body ng-app="myApp">
  
  <button ng-click="addItem()">Add Item</button>
  <button ng-click="removeItem()">Remove Item</button>
  
  <ul>
    <li ng-repeat="item in items" class="show-animation" detect-event>{{ $index }}</li>
  </ul>
  
  <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
  <script src="http://code.angularjs.org/1.2.9/angular.min.js"></script>
  <script src="http://code.angularjs.org/1.2.9/angular-animate.min.js"></script>
</body>
</html>
 
.show-animation {
  height: 20px;
  width: 100px;
  background-color: red;
}
​
/* .show-animation.ng-enter, 
.show-animation.ng-leave, 
.show-animation.ng-move {
  -webkit-transition: 5s linear all;
  transition: 5s linear all;
  position:relative;
}
​
.show-animation.ng-enter {
  left:-10px;
  opacity:0;
}
.show-animation.ng-enter.ng-enter-active {
  left:0;
  opacity:1;
}
​
.show-animation.ng-leave {
  left:0;
  opacity:1;
}
.show-animation.ng-leave.ng-leave-active {
  left:-10px;
  opacity:0;
}
​
.show-animation.ng-move {
  opacity:0.5;
}
.show-animation.ng-move.ng-move-active {
  opacity:1;
} */
 
var app = angular.module('myApp', ['ngAnimate']);
​
app.run(function($rootScope, $timeout) {
  $rootScope.items = [{}];
  
  $rootScope.addItem = function() {
    $rootScope.items.push({});
  };
  
  $rootScope.removeItem = function() {
    $rootScope.items.pop();
  };
});
​
app.animation('.show-animation', function() {
  return {
    enter : function(element, done) {
      jQuery(element).css({
        position:'relative',
        left:-10,
        opacity:0
      });
      jQuery(element).animate({
        left:0,
        opacity:1
      }, done);
    },
​
    leave : function(element, done) {
      jQuery(element).css({
        position:'relative',
        left:0,
        opacity:1
      });
      jQuery(element).animate({
        left:-10,
        opacity:0
      }, done);
    },
​
    move : function(element, done) {
      jQuery(element).css({
        opacity:0.5
      });
      jQuery(element).animate({
        opacity:1
      }, done);
    }
  };
});
​
app.directive('detectEvent', function() {
  return function(scope, element, attrs) {    
    element.on('$animate:before', function() {
      console.log('$animate:before');
    });
    
    element.on('$animate:after', function() {
      console.log('$animate:after');
    });
​
  };
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers