我一直在网上搜索这个问题的答案,但我似乎找不到任何明确的答案。
问题似乎是 ngAnimate 指令没有添加类ng-enter
或ng-leave
路由发生变化时。我创建了一个测试应用程序并将ngAnimate
指令包含在应用程序中。我还创建了动画类并将该类应用于ng-view
元素
我的测试应用程序的链接在这里:http ://plnkr.co/edit/6qCMeIkWeXeTQyDWcu29?p=preview
我一直在网上搜索这个问题的答案,但我似乎找不到任何明确的答案。
问题似乎是 ngAnimate 指令没有添加类ng-enter
或ng-leave
路由发生变化时。我创建了一个测试应用程序并将ngAnimate
指令包含在应用程序中。我还创建了动画类并将该类应用于ng-view
元素
我的测试应用程序的链接在这里:http ://plnkr.co/edit/6qCMeIkWeXeTQyDWcu29?p=preview
-webkit
只需在您的 css 文件中为每个浏览器添加每个供应商的前缀,例如 chrome
.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); }
}