JSFiddle - React, Tailwind, and code Playground

by secretgspot

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css">
<script src="http://fonts.googleapis.com/css?family=Donegal+One"></script>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<div ng-app="app" ng-controller='AnimateCtrl'>
    <div class="page-header">
      <h3>Animate</h3>
    </div>

    <div>
      Filter (Default Directive) :
      <input type="text" ng-model="search" autofocus>
    </div>

    <div class="box" ng-repeat="item in items | filter:search" ng-animate="'animate'">
      {{item}}
    </div>

    <br><br>

    <div>
      Filter (Custom Directive) :
      <input type="text" ng-model="search2">
    </div>

    <div class="box" ng-repeat="item2 in items2 | filter:search2" ng-animate="'animate2'">
      {{item2}}
    </div>
</div>

CSS

body, div {
  font-family: 'Donegal One', serif;
}

.box {
  border: 2px solid;
  width: 200px;
  height: 50px;
  padding: 10px;
  margin: 10px;
  display: inline-block;
  border-radius: 10px;
}

.animate-enter, .animate-leave, .animate-move {
  -webkit-transition: 0.5s linear all;
  -moz-transition: 0.5s linear all;
  -ms-transition: 0.5s linear all;
  transition: 0.5s linear all;

  -webkit-transform: rotateX(90deg);
  -moz-transform: rotateX(90deg);
  -ms-transform: rotateX(90deg);
  transform: rotateX(90deg);

  opacity: 0;
}

.animate-enter.animate-enter-active {
  -webkit-transform: rotateX(0deg);
  -moz-transform: rotateX(0deg);
  -ms-transform: rotateX(0deg);
  transform: rotateX(0deg);

  opacity: 1;
}


.animate-enter-setup {
}

.animate-leave-setup {
}

JavaScript

var app = angular.module('app', []).
  config(["$httpProvider", function(provider) {
    provider.defaults.headers.common['X-CSRF-Token'] = $('meta[name=csrf-token]').attr('content');
    provider.defaults.headers.common["X-Requested-With"] = 'XMLHttpRequest';
  }]);


function AnimateCtrl($scope) {
  $scope.items  = ["test1", "aaa", "bbb", "abc", "bcd"];
  $scope.items2 = ["test1", "aaa", "bbb", "abc", "bcd"];
}

var animationFunction = function(startCSS, endCSS) {
  return function() {
    return {
      setup : function(element) {
        element.css(startCSS);
      },
      start : function(element, done) {
        element.animate(endCSS, function() {
          done();
        });
      }
    }
  }
};

app.animation('animate2-enter', animationFunction({'opacity': 0}, {'opacity' : 1}));
app.animation('animate2-leave', animationFunction({'opacity': 1}, {'opacity' : 0}));