AngularJs 过渡水平菜单与 ng-show
AngularJs transition horizontal menu with ng-show
我尝试在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?
这是一个小提琴,展示了如何根据按钮单击将样式应用于元素
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>
相关文章:
- 使用angularjs ng Show/ng hide显示和隐藏不同的内容
- 我需要NG-IF/NG-SWITCH还是NG-SHOW&NG-HIDE
- 如何在AngularJS视图中使用promise(ng-show)
- AngularJS:如何使用java脚本函数更改跨度的ng-show条件
- ng show和ng hide don'I don’我一秒钟都不工作
- AngularJS:使用ng-show/hide动态维护下拉列表的3种状态(InProgress、Success、Err
- ng-show内容在页面加载过程中闪烁,尽管它不是真实的,并且ng-cloak不适用于FF
- 如何验证使用 ng-repeat、ng-show(角度)动态创建的输入
- 如何使用ng-repeat与清单模型进行ng-show
- AngularJS:ng-show不适用于ng-app
- 为什么我的html节点保持类ng隐藏属性ng show=true
- AngularJS:为什么ng show没有在IE11上运行
- Angularjs ng-show not working with checkbox with default val
- Angularjs - grouping ng show
- AngularJS:隐藏<td>使用ng-hide/ng-show没有间隙
- Angularjs ng-show == Id?
- 基于参数(angular)调用特定元素上的ng show
- 只有当我导航回窗口时,angular ng show才有效
- 如何使用ng-show和ng-click进行Angularize Mobile菜单
- AngularJs 过渡水平菜单与 ng-show