Question

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

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

的style.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。我从angular documents中发现，CSS的语法发生了变化

我也尝试了相同结果的新语法。

感谢任何帮助。

Answer 1

以下是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>

Answer 2

从1.1.5到1.2的大量变化。所以把我的代码移到1.2。动画更精简。

关注动画的this示例。

可悲的是，动画的角度文档几乎为零。 YearOfMoo在最新的Angular

上有一些关于动画的好文档

ngAnimate在ngShow上无法正常工作

2 个答案: