css - Ng-Animate 不适用于 Chrome

标签 css angularjs ng-animate animate.css

我在 Chrome 和 Firefox 之间有一些兼容性问题。我使用 ng-view 创建动画(使用 ng-ng-enter 和 leave)。这是一个 plunker 的例子:

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

样式.css

    .view.ng-leave, .view.ng-enter{
    -webkit-animation-duration: 0.5s;
    -moz-animation-duration: 0.5s;
    -ms-animation-duration: 0.5s;
    -o-animation-duration: 0.5s;
    animation-duration: 0.5s;
    -webkit-animation-fill-mode: both;
    -moz-animation-fill-mode: both;
    -ms-animation-fill-mode: both;
    -o-animation-fill-mode: both;
    animation-fill-mode: both;
}
.view.ng-leave {
    -webkit-animation-name: fadeOut;
    -moz-animation-name: fadeOut;
    -ms-animation-name: fadeOut;
    -o-animation-name: fadeOut;
    animation-name: fadeOut;
}
.view.ng-enter {
    -webkit-animation-name: fadeIn;
    -moz-animation-name: fadeIn;
    -ms-animation-name: fadeIn;
    -o-animation-name: fadeIn;
    animation-name: fadeIn;
 }

当我执行 plunker Firefox 时,没问题,我有一个动画。 但是我在chrome中执行的时候没有起作用,但是我是prefix -webkit-

问题是什么?

最佳答案

<ng-view>HTMLUnknownElement .

似乎动画不适用于 chrome 中的 HTMLUnknownElements。

改变 <ng-view><div ng-view>为我工作。

请联系:http://plnkr.co/edit/DT5xcxgficbdu8CaFTlT?p=preview

关于css - Ng-Animate 不适用于 Chrome,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28992463/

相关文章:

angularjs - 快速离开和进入导致 Angular ng-if 动画中的多个元素

html - HTML 多边形 iframe 可能吗?

javascript - 即使填写并检查了所有字段后,表单也不会提交

angularjs - 扩展 datepicker 的功能(ui bootstrap)

javascript - 根据过滤器的值有条件地添加 ng-animate 指令

javascript - AngularJS - 使用 TweenMax 进行位置感知 ng-view 导航

css - 问答 - Angular CLI : Using CSS preprocessors globally

html - 使容器在包裹时收缩以适合子元素

AngularJS 将逻辑放在服务中而不是 Controller 中,最佳实践

angularjs - 表格组件中的 Angular 表格行组件