JSFiddle - React, Tailwind, and code Playground

by ncapito

HTML

<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/gsap/1.9.7/TweenMax.min.js"></script>
     <button ng-click="toggle = !toggle">Toggle!</button>

      <div class="box on" ng-show="toggle" ng-animate="{show:'list-hide', show:'list-show'}">On</div>
      <div class="box off" ng-hide="toggle" ng-animate="{hide:'list-hide', show:'list-show'}">Off</div>

CSS

.box { color: white; text-align: center; height: 100px; font-size: 86px; }
    .on  { background-color: green; }
    .off { background-color: red; }

JavaScript

var myApp = angular.module('myApp', ['AppAnimations']);

angular.module('AppAnimations', [])
      .animation('list-hide', ['$window',function($window) {
        return {
            
          start : function(element, done) {
            console.log('list-out');
              debugger
            TweenMax.set(element, {position:'relative'});

            var duration = 1; 
            //we can use onComplete:done with TweenMax, but lets use
            //a delay value for testing purposes
            TweenMax.to(element, 1, {opacity:0, width:0});
            $window.setTimeout(done, duration * 1000);
          }
        };
      }]).animation('list-show', ['$window',function($window) {
        return {
          setup: function(element) {
            debugger
            TweenMax.set(element, {opacity:0, width:0});
          },
          start : function(element, done) {
            console.log('list-in');
            var duration = 1; 
            //we can use onComplete:done with TweenMax, but lets use
            //a delay value for testing purposes
            TweenMax.to(element, duration, {opacity:1, width:210});
            $window.setTimeout(done, duration * 1000);
          }
        };
      }]);

      myApp.controller('MainController', ['$scope', function($scope) {
          $scope.toggle = true;
        }]);