带有 ng-show 的 AngularJs 过渡水平菜单答案

【问题标题】：AngularJs transition horizontal menu with ng-show带有 ng-show 的 AngularJs 过渡水平菜单
【发布时间】：2013-10-29 22:16:23
【问题描述】：

我尝试在 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 是这样的：

.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 > 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 > a:hover{
background-color: #eeeeee;
text-decoration:none;
}

我想通过单击按钮淡出“导航容器”类。任何人都可以帮我做这个css吗？

【问题讨论】：

it don't work 不是一个很好的解释。什么起作用或不起作用？您尝试了哪些步骤来解决问题？在 plunker 或 jsfiddle 中提供演示以及更好的解释
您的问题与 AngularJS 甚至 Javascript 完全无关

标签： javascript css angularjs

【解决方案1】：

这里是一个小提琴，展示了如何根据按钮单击将样式应用于元素

http://jsfiddle.net/5vYzD/3/

HTML

<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>

【讨论】：