JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/X.Y.Z/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app>
  <a href="#" class="toggle-menu" ng-click="collapsed=!collapsed">Click to toggle menu</a>
  <div class="menu" ng-show="collapsed" ng-animate="{show: 'menu-show', hide: 'menu-hide'}">
    <div class="files">
      <input type="checkbox" />
      <label>first</label>
      
      <input type="checkbox" />
      <label>second</label>
    </div>
    <div class="diffs">
      <input type="checkbox" />
      <label>first</label>
      
      <input type="checkbox" />
      <label>second</label>
    </div>
  </div>
</div>

CSS

.menu-show-setup, .menu-hide-setup {
  transition:all 0.5s ease-out;
  overflow:hidden
}

.menu-show-setup {
  max-height:0;
}
.menu-show-setup.menu-show-start {
  max-height:25%;
}

.menu-hide-setup {
  max-height:25%;
}
.menu-hide-setup.menu-hide-start {
  max-height:0;
}