ngShow 上的 ngAnimate 不起作用答案

【问题标题】：ngAnimate on ngShow not workingngShow 上的 ngAnimate 不起作用
【发布时间】：2013-08-28 14:28:24
【问题描述】：

我正在尝试使用 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>

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

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

感谢任何帮助。

【问题讨论】：

你能把你的代码加到jsbin吗？

标签： javascript angularjs ng-animate

【解决方案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>

【讨论】：

谢谢。所以 ng-animate 必须与 TweenMax lib 一起用于 css 动画？或者是否可以只使用 ng-animate 并在 nganimate 示例中看到？

【解决方案2】：

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

关注this 动画示例。

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

【讨论】：