sevenLee
11/14/2015 - 7:07 AM

Angular 1.4 $animateCss

Angular 1.4 $animateCss

animateCss.js
content_copyfile_download
angular.module('app', ['ngAnimate'])
  .controller('Main', function(){
    this.nums = [1,2,3,4,5];
  })
  .animation('.fade', function($animateCss){
  
    return {
      enter: function(element){
        return $animateCss(element, {
          from: {
            opacity: 0
          },
          
          to : {
            opacity: 1
          },
          
          duration: 0.5,
          stagger: 0.2,
          keyframeStyle: 'lightSpeedIn .1s'
        });
      },
      
      leave: function(element){
        return $animateCss(element, {
          from: {
            opacity: 1
          },
          
          to : {
            opacity: 0
          },
          
          duration: 0.5,
          stagger: 0.2,
          keyframeStyle: 'lightSpeedOut .1s'
     
          
        });
      }
    };
  });
animateCss.html
content_copyfile_download
<body ng-app="app">
  <section ng-controller="Main as vm">
    <input type="text" placeholder="filter" ng-model="filter">
    <ul>
      <li 
        ng-repeat="num in vm.nums | filter:filter" 
        class="fade">
           num: {{ ::num }}
      </li>
    </ul>
  </section>
</body>
Comment.md
content_copyfile_download
  • Rendered
  • Source

Just as an aesthetic/UX suggestion for when anyone goes to actually implement this in a project, stagger ***should be no more than *** 0.1, otherwise the animation is too slow. I found it looked best/most fluid at 0.05. :D