Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<!DOCTYPE html>
<html ng-app='app'>
<head>
  
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>
  
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.9/angular-animate.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body ng-controller='testCtrl as ctrl'>
  <button ng-click='ctrl.toggle()'>toggle</button>
  <div class='item' ng-repeat='item in ctrl.items | limitTo: ctrl.limit'>{{item}}</div>
</body>
</html>
 
.item.ng-enter,
.item.ng-leave {
  -webkit-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -moz-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -ms-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  -o-transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  transition: 400ms cubic-bezier(0.250, 0.250, 0.750, 0.750) all;
  position: relative;
  display: block;
}
.item.ng-leave.ng-leave-active,
.item.ng-enter {
  -webkit-transform: scaleY(0);
  -moz-transform: scaleY(0);
  -ms-transform: scaleY(0);
  -o-transform: scaleY(0);
  transform: scaleY(0);
  height: 0px;
  opacity: 0;
}
.item.ng-leave,
.item.ng-enter.ng-enter-active {
  -webkit-transform: scaleY(1);
  -moz-transform: scaleY(1);
  -ms-transform: scaleY(1);
  -o-transform: scaleY(1);
  transform: scaleY(1);
  height: 30px;
  opacity: 1;
}
 
angular.module('app', ['ngAnimate'])
  .controller('testCtrl', function($scope) {
  var oldLimit,
      isOpen = false;
  
  this.items = ["hello", "world", "second", "third", "fourth", "fifth", "sixth", "seventh"];
  this.limit = 3;
  
  this.toggle = function() {
    if (isOpen) 
      this.limit = oldLimit;
    else {
      oldLimit = this.limit;
      this.limit = this.items.length;
    }
    
    isOpen = !isOpen;
  };
}); 
 
 
Output 300px

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

Dismiss x
public
Bin info
anonymouspro
0viewers