Edit in JSFiddle

<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>

.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;
}

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

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