Ng-Animate不与Chrome合作

时间:2015-03-11 16:43:48

标签: css angularjs ng-animate animate.css

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

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

的style.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中执行时,我没有工作,但我的前缀是-webkit -

有什么问题?

1 个答案:

答案 0 :(得分:1)

<ng-view>HTMLUnknownElement

似乎动画不能与chrome中的HTMLUnknownElements一起使用。

<ng-view>更改为<div ng-view>对我有用。

Plnkr:http://plnkr.co/edit/DT5xcxgficbdu8CaFTlT?p=preview