ngAnimate 不为过渡设置动画答案

【问题标题】：ngAnimate doesn't animate transitionsngAnimate 不为过渡设置动画
【发布时间】：2016-05-27 12:45:14
【问题描述】：

我正在写作，应用程序和 ngAnimate 在某个时候停止工作。我正在尝试调试它并将我的应用程序缩减为这个非常小的示例，其中没有什么比按下按钮时的动画发生更多的事情。不过，我不知道为什么它不起作用。我按预期注入了 ngAnimate，而且我还有脚本标签来包含源代码。

var searchApp = angular.module('searchApp', ['ngAnimate'])

http://plnkr.co/edit/ZJIF6BGs0ORr3S6YnJwG?p=preview

任何人都可以看到我做错了什么？这一定是一件非常明显的事情，因为该应用程序现在如此简单......花了几个小时试图看到它。

【问题讨论】：

标签： angularjs ng-animate

【解决方案1】：

问题在于你的 CSS 而不是 Angular。

Here's a working version

问题之一是.testiDiv .ng-hide 在这种情况下无效，这意味着您希望.ng-hide 在内 .testiDiv 而不是在它上面。

问题二是动画在错误的类上，应该与Angular自动应用到使用ng-show/ng-hide的元素上的动画类有关。

.testiDiv {
  background-color: black;
  width: 100px;
  height: 100px;
  opacity: 1;
}

.testiDiv.ng-hide {
  opacity: 0;
}

.testiDiv.ng-hide-add, .testiDiv.ng-hide-remove {
  -webkit-transition:all 1s linear;
    -moz-transition:all 1s linear;
    -o-transition:all 1s linear;
    transition:all 1s linear;
}

【讨论】：

非常感谢！作为一个侧面发现，我发现将 ui-view 应用于文档的 -tag 会破坏整个应用程序的动画。这是我整个应用程序的另一个问题。它可能与谁有关。相反，在 body 中添加一个 div-tag 并将 ui-view 放在上面。