ngAnimate不在Angular 1.2中将ng-enter类添加到ng-view

时间:2014-08-21 17:05:09

标签: javascript angularjs angularjs-directive ng-animate ng-view

我一直在网上搜索答案,但我似乎无法找到任何确定的答案。

问题似乎是当路由发生变化时,ngAnimate指令不会添加类ng-enterng-leave。我创建了一个测试应用程序,并将ngAnimate指令包含在应用程序中。我还创建了animate类并将该类应用于ng-view元素

我的测试应用程序的链接位于:http://plnkr.co/edit/6qCMeIkWeXeTQyDWcu29?p=preview

1 个答案:

答案 0 :(得分:6)

只需为每个浏览器添加每个供应商的前缀,例如你的css文件中的chrome -webkit

<强> FORKED PLUNKER

.slide.ng-enter, .slide.ng-leave{
  position: absolute;
}

.slide.ng-enter { 
  animation: slideInRight 0.5s both ease-in; z-index: 8888; 
  -webkit-animation: slideInRight 0.5s both ease-in; z-index: 8888; 
}
.slide.ng-leave { 
  animation: slideOutLeft 0.5s both ease-in; z-index: 9999; 
  -webkit-animation: slideOutLeft 0.5s both ease-in; z-index: 9999; 
}


@keyframes slideOutLeft {
    to      { transform: translateX(-100%); }
}

@-webkit-keyframes slideOutLeft {
    to      { transform: translateX(-100%); }
}


@keyframes slideInRight {
    from    { transform: translateX(100%); }
    to      { transform: translateX(0); }
}

@-webkit-keyframes slideInRight {
    from    { transform: translateX(100%); }
    to      { transform: translateX(0); }
}