ngAnimate不会为过渡设置动画

Question

我正在编写应用程序并且ngAnimate在某个时候停止了工作。我正在尝试调试它并将我的应用程序减少到这个非常小的例子，其中没有比按下按钮时动画更多的事情了。不过，我无法找出它为什么不起作用。我正在注入ngAnimate，我也有脚本标记来包含源代码。

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

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

任何人都可以看到我做错了什么？它必须是一些非常明显的东西，因为应用程序现在非常简单......花了好几个小时试图看到它。

Answer 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;
}