title: CSS3 transition using ng-show and bootstrap
body: <p>I'm developing a javascript app using angular, and for a fluid layout i'm using Bootstrap 3, i'm suffer a problem with the css3 transitions used by ng-show directive, i'm going to explain my problem, i have a jsfiddle to see my code: <a href="http://jsfiddle.net/calamarico/mCPZc/2/embedded/result/" rel="nofollow">jsfiddle</a></p>
  
  <p>I used the ng-mouseover directive on the "Options", then angular shows a submenu and i put the correct css for transitions (with opactity in this case) and i used ng-mouseleave on that submenu to hide.</p>
  
  <p>The problem comes when i put the  of submenu in a .container (for grid layout using bootstrap), the animation, if you can see, is abnormal. If i take out the  submenu from the .container div the animation is correct. I don't know why i suffer this problem inside the grid layout of bootstrap, if anyone can give me some light.</p>
  
  <pre><code>&lt;nav class="navbar navbar-inverse navbar-static-top submenu" ng-show="isSubmenu" 
        data-ng-mouseleave="toggleSubmenu(false)" role="navigation"&gt;
        &lt;div class="container"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-md-6"&gt;&lt;/div&gt;
            &lt;div class="col-md-6 col-xs-12"&gt;
              &lt;ul class="categories"&gt;
                &lt;li data-ng-repeat="category in categories"&gt;{{category}}&lt;/li&gt;
              &lt;/ul&gt;
            &lt;/div&gt;  
          &lt;/div&gt;
        &lt;/div&gt;
    &lt;/nav&gt;
  </code></pre>