ng-animate不触发动画

时间:2014-11-04 19:39:22

标签: javascript css angularjs ng-animate

在我的角度js网站上,我有角度动画lodaed和部署(在检查器中我看到js文件夹中的angular-animate.js所以我知道它的加载。我想要做的是在页面加载时让我的标题动画所以我在项目中添加了以下内容

template.html

<header id="header" ng-animate=" 'animate' ">

 </header>

的style.css

.animate-enter {
  -webkit-transition: 1s linear all; /* Chrome */
  transition: 1s linear all;
  opacity: 0;
}

.animate-enter.animate-enter-active {
  opacity: 1;
}

当我从主页链接点击并加载“template.html”时,问题是没有动画吗?这里有什么我想念的吗?

1 个答案:

答案 0 :(得分:0)

根据Angular文档:

  

自动支持动画的指令是:ngRepeat,   ngInclude,ngIf,ngSwitch,ngShow,ngHide,ngView和ngClass。习惯   指令可以通过使用$ animate来利用动画   服务。

您需要在标头标记中使用其中一个指令。