Angular - Animations - Show/Hide

by Brett DeWoody

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="https://code.angularjs.org/1.3.15/angular-animate.min.js"></script>
<link rel="stylesheet" href="http://yui.yahooapis.com/pure/0.6.0/pure-min.css">
<div class="" ng-controller="MyCtrl as vm">
    <header class="pure-menu-horizontal pure-g">
        <div class="dropdown pure-u-1" ng-show="vm.toggleDropdown">
            Dropdown Content
        </div>
        <div class="toggle pure-menu-heading pure-menu-link pure-u-1" ng-click="vm.toggleDropdown = !vm.toggleDropdown">
            Menu
        </div>
    </header>
</div>

SCSS

body {
    overflow-y:hidden;
}

header {
    
    > div {
        
        &.dropdown {
            
            height:50px;
            overflow: hidden;
            -webkit-transition:all ease-out 0.5s;
            -moz-transition:all ease-out 0.5s;
            -ms-transition:all ease-out 0.5s;
            -o-transition:all ease-out 0.5s;
            transition:all ease-out 0.5s;
            
            &.ng-hide{
                height:0;
            }
        }
        
        &.toggle {
            text-align:right;
            background-color:#06b25b;
            color:#fff;
            
            &:hover {
                cursor:pointer;
                background-color:#06b25b;
            }
        }
        
    }
    
}

.sample-show-hide {
  padding:10px;
  border:1px solid black;
  background:white;
}

.sample-show-hide {
  -webkit-transition:all linear 0.5s;
  
}

JavaScript

var myApp = angular.module('myApp',['ngAnimate'])
	.controller('MyCtrl', function($scope) {
    
    	var vm = this;
    
   		vm.toggleDropdown = false;
    
	});