JSFiddle - React, Tailwind, and code Playground

by mreis1

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.7/angular-animate.js"></script>
<div ng-controller="demoCtrl">
	<div class="item" ng-class="{selected:selected}"></div>
	<button ng-click="selectToggle();">
		{{selected? 'Unselect' : 'Select'}}
	</button>
</div>

CSS

/*
Sometimes we want to animate elements that by default are 

*/

		.item {
      width: 50px;
      height: 50px;
      background: grey;
			display: none;
    }
    .item.selected {
      background-color: red;
			display: block;
			transform: translateY(0);
    }
    .item.selected-add {
      opacity: 0;
      /*transition: opacity 3s;*/
			transition: opacity 300ms, transform  300ms;
			display: block;
			transform: translateY(100px);
    }
		.item.selected-remove {
			 opacity: 1;
			transition: opacity 300ms, transform  300ms;
			display: block;
			transform: translateY(0);
		}
		
    .item.selected-add-active{
      /* Here we specify the final state of the animation,
       * which is visible having 1 opacity
       */
      opacity: 1;
			display: block;
			transform: translateY(0);
			transition: opacity 300ms, transform  300ms;
    }
		
    .item.selected-remove-active {
    	opacity: 0;
			display: block;
			transform: translateY(100px);
			transition: opacity 300ms, transform  300ms;
    }

JavaScript

angular.module('demo', ['ngAnimate'])
      .controller('demoCtrl', function($scope) {
        $scope.selected = false;
        $scope.selectToggle = function() {
          $scope.selected = !$scope.selected;
        };
      });
			

      angular.bootstrap(document, ['demo']);