Javascript 带ng show的AngularJs过渡水平菜单

我尝试用AngularJs制作水平菜单。我想通过点击按钮淡出菜单。我想通过css3转换实现淡出，但它不起作用

这是实际代码：

<div class="header-title" ng-bind="pageTitle">
</div>
<div class="content-container" ng-controller="AboutCtrl">
    <div class="navigation-container"  ng-show="checked">
        <li ui-route="/services" ng-class="{active:$uiRoute}" class="navigation-item"><a
                href="#/services">Services</a>
        </li>
        <li ui-route="/services" ng-class="{active:$uiRoute}" class="navigation-item"><a
                href="#/services">Services 1</a>
        </li>
        <li ui-route="/services" ng-class="{active:$uiRoute}" class="navigation-item"><a
                href="#/services">Services 2</a>
        </li>
    </div>
<div class="navbar navbar-inverse">
    <div class="navbar-inner">
        <button ng-init="checked=false" ng-click="checked=!checked" type="button" class="btn btn-navbar">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
        </button>
    </div>
</div>

<div>content</div>

</div>

---

我想通过单击按钮淡出“导航容器”类。有人能帮我做一下css吗？

这里有一个小提琴，展示了如何基于按钮点击将样式应用于元素

HTML

你好
应用第一种样式
应用第二种样式

它不起作用

不是一个很好的解释。什么有效或无效？您尝试了哪些步骤进行故障排除？在plunker或JSFIDLE中提供一个演示，并提供更好的解释。您的问题与AngularJS甚至Javascript无关

<div ng-controller="MyCtrl">
   <div class='box' ng-class='{"first": selected==1, "second": selected==2}'>Hello</div>

   <button ng-click='selected=1'>Apply first style</button>
   <button ng-click='selected=2'>Apply second style</button>
</div>