0

我正在尝试使用 ngAnimate 执行动画菜单。

主页.html

<div id="left-menu" ng-hide="showMenu">
    <div class="wrapmenu">
      Menu
    </div>

</div>

<div id="content-wrapper" ng-show="showMenu" ng-animate="{show: 'fadeIn', hide:'fadeOut'}">
  <button id="menu" ng-click="showMenu = !showMenu"></button>
</div>

样式.css

.fadeIn-setup,.fadeOut-setup {
    -webkit-transition: 1s linear opacity;
    -moz-transition: 1s linear opacity;
    -o-transition: 1s linear opacity;
    transition: 1s linear opacity;
}
.fadeIn-setup{
    opacity:0;
}
.fadeOut-setup{
    opacity:1;
}
.fadeIn-setup.fadeIn-start {
    opacity: 1;
}
.fadeOut-setup.fadeOut-start{
    opacity:0;
}

ngShow 和 Hide 效果很好。但是动画没有被触发。

我已经更新到 Angular 1.1.5。我从角度文档中发现，CSS 的语法发生了变化

我还尝试了具有相同结果的新语法。

任何帮助表示赞赏。

4

2 回答 2

2

以下是 1.1.5 中的工作示例：

http://jsfiddle.net/ncapito/CTfL8/

 <button ng-click="toggle = !toggle">Toggle!</button>

  <div class="box on" ng-show="toggle" ng-animate="{show:'list-show', hide:'list-hide'}">On</div>
  <div class="box off" ng-hide="toggle" ng-animate="{hide:'list-hide', show:'list-show'}">Off</div>
于 2013-08-23T10:29:16.543 回答
0

从 1.1.5 到 1.2 的大量更改。所以将我的代码移到 1.2 中。动画更加精简。

按照这个例子做动画。

遗憾的是，动画的 Angular 文档几乎为零。YearOfMoo有一些关于最新 Angular 动画的优秀文档

于 2013-08-28T06:28:24.500 回答