JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.4/css/bootstrap.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.9.6/angular-material.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.13.0/ui-bootstrap-tpls.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/0.9.6/angular-material.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-animate.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular-aria.js"></script>
<div ng-app="myApp">
  <div ng-controller="myController">
      <a href="javascript:;" ng-click="showHide()">show/hide</a>
      
      <md-button style="height: 50px;" class="md-raised md-primary sample-show-hide" ng-hide="hideButton">Primary</md-button>
  </div>
</div>

CSS

.sample-show-hide {
    -webkit-transition:all linear 1.5s  !important;
    transition:all linear 1.5s !important;
}

.sample-show-hide.ng-hide {
    opacity: 0;
    height: 0px !important;
}

.sample-show-hide.ng-show {
    opacity: 1;
    height: 50px !important;
}

JavaScript

var app = angular
    .module('myApp', ['ui.bootstrap', 'ngAnimate', 'ngAria', 'ngMaterial'])
    .controller('myController', function ($scope, $modal) {
        $scope.hideButton = true;
        $scope.showHide = function() {
            $scope.hideButton = !$scope.hideButton;
        }
        
    });