JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular-animate.min.js"></script>
<div ng-app="app" ng-controller="AppCtrl">
    <table border="1" style="text-align:center; margin-left:auto; margin-right:auto;">
        <tr>
            <td>fade in</td>
            <td>fade out</td>
            <td>fade in and out</td>
        </tr>
        <tr>
            <td class="cell">
                <div class="square fadeIn" ng-show="isShowLeft"></div>
            </td>
            <td class="cell">
                <div class="square fadeOut" ng-show="isShowCenter"></div>
            </td>
            <td class="cell">
                <div class="square fadeIn fadeOut" ng-show="isShowRight"></div>
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" ng-model="isShowLeft" />show</td>
            <td>
                <input type="checkbox" ng-model="isShowCenter" />show</td>
            <td>
                <input type="checkbox" ng-model="isShowRight" />show</td>
        </tr>
    </table>
</div>

CSS

.cell {
    width:100px;
    height:100px;
}
.square {
    width:100%;
    height:100%;
    background-color:#F00;
}
.fadeIn.ng-hide-remove {
    -webkit-transition:all linear 1s;
    -moz-transition:all linear 1s;
    -o-transition:all linear 1s;
    transition:all linear 1s;
    display:block!important;
    opacity:0;
}
.fadeIn.ng-hide-remove.ng-hide-remove-active {
    opacity:1;
}
.fadeOut.ng-hide-add {
    -webkit-transition:all linear 1s;
    -moz-transition:all linear 1s;
    -o-transition:all linear 1s;
    transition:all linear 1s;
    display:block!important;
    opacity:1;
}
.fadeOut.ng-hide-add.ng-hide-add-active {
    opacity:0;
}

JavaScript

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

function AppCtrl(scope) {
    scope.isShowLeft = false;
    scope.isShowCenter = true;
    scope.isShowRight = false;
}