title: AngularJs transition horizontal menu with ng-show
body: <p>i try to make a horizontal Menu in AngularJs. I want to fade out the menu by clicking on a button. I want to realize the fade out by css3 transition but it don't work.</p>
  
  <p>This is the actually code:</p>
  
  <pre><code>&lt;div class="header-title" ng-bind="pageTitle"&gt;
  &lt;/div&gt;
  &lt;div class="content-container" ng-controller="AboutCtrl"&gt;
      &lt;div class="navigation-container"  ng-show="checked"&gt;
          &lt;li ui-route="/services" ng-class="{active:$uiRoute}" class="navigation-item"&gt;&lt;a
                  href="#/services"&gt;Services&lt;/a&gt;
          &lt;/li&gt;
          &lt;li ui-route="/services" ng-class="{active:$uiRoute}" class="navigation-item"&gt;&lt;a
                  href="#/services"&gt;Services 1&lt;/a&gt;
          &lt;/li&gt;
          &lt;li ui-route="/services" ng-class="{active:$uiRoute}" class="navigation-item"&gt;&lt;a
                  href="#/services"&gt;Services 2&lt;/a&gt;
          &lt;/li&gt;
      &lt;/div&gt;
  &lt;div class="navbar navbar-inverse"&gt;
      &lt;div class="navbar-inner"&gt;
          &lt;button ng-init="checked=false" ng-click="checked=!checked" type="button" class="btn btn-navbar"&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
              &lt;span class="icon-bar"&gt;&lt;/span&gt;
          &lt;/button&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div&gt;content&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Actually my CSS looks like this:</p>
  
  <pre class="lang-css prettyprint-override"><code>.navigation-container{
  max-height:600px;
  -webkit-transition: all 0.3s ease-out;
  -moz-transition: all 0.3s ease-out;
  -ms-transition: all 0.3s ease-out;
  -o-transition: all 0.3s ease-out;
  transition: all 0.3s ease-out;
  }
  
  .header-title{
  background-color: #dddddd;
  padding: 15px 20px;
  text-align: center;
  color: #333333;
  font-weight: bold;
  font-size: 20px;
  }
  
  .navigation-item{
  list-style:none;
  background-color: white;
  text-align: center;
  color: #777777;
  font-size: 12px;
  font-weight: normal;
  line-height: 1.4;
  border-bottom:dotted 1px #dddddd;
  }
  
  .navigation-item &gt; a {
  padding: 15px;
  display: block;
  -webkit-transition: all 0.3s ease-out;
      -moz-transition: all 0.3s ease-out;
      -ms-transition: all 0.3s ease-out;
      -o-transition: all 0.3s ease-out;
      transition: all 0.3s ease-out;
  }
  
  .navigation-item &gt; a:hover{
  background-color: #eeeeee;
  text-decoration:none;
  }
  </code></pre>
  
  <p>I want to fadeout the class "navigation-container" by clicking the button. Can anyone please help me to do the css for this?</p>