简单的ng-show动画无效

时间:2017-05-03 14:32:42

标签: angularjs ng-show

我正在尝试从angularjs文档中重现ng-show动画

<div class="v3-account-form animate-show-hide" ng-show="thing.shown">
   <h3>{{thing.id}}</h3>
</div>

的CSS:

.animate-show-hide.ng-hide {
  opacity: 0;
}

.animate-show-hide.ng-hide-add,
.animate-show-hide.ng-hide-remove {
  transition: all linear 0.5s;
}

.v3-account-form {
  border: 1px solid black;
  opacity: 1;
}

但动画在这里不起作用是小提琴。 http://jsfiddle.net/ffKTy/527/

1 个答案:

答案 0 :(得分:1)

你没有导入你的小提琴ngAnimate。正如你在Angular Plunker中看到的那样,有必要让ngShow动画工作。

<script src="//code.angularjs.org/snapshot/angular.min.js"></script>
<script src="//code.angularjs.org/snapshot/angular-animate.js"></script>