JSFiddle - React, Tailwind, and code Playground

by Martin Renvoize

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.2/angular-animate.js"></script>
<div ng-app="myApp">
  <div ng-conroller="MyController">
    Click me: <input type="checkbox" ng-model="checked"/><br/>
    <div class="animate-show" ng-show="checked">
        I am checked
    </div>
  </div>
</div>

CSS

.animate-show {
  line-height:20px;
  opacity:1;
  padding:10px;
  border:1px solid black;
  background:white;
}

.animate-show.ng-hide-add,
.animate-show.ng-hide-remove {
  display:block!important;
}

.animate-show.ng-hide-add.ng-hide-add-active,
.animate-show.ng-hide-remove.ng-hide-remove-active {
  -webkit-transition:all linear 0.5s;
  transition:all linear 0.5s;
}

JavaScript

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

var controllers = angular.module('my.controllers', []);
controllers.controller('MyController', function($scope) {
    $scope.checked = true;
});