【问题标题】:Ng-Animate doesn't work with ChromeNg-Animate 不适用于 Chrome
【发布时间】:2015-05-13 14:06:09
【问题描述】:

我在 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-

有什么问题?

【问题讨论】:

    标签: css angularjs ng-animate animate.css


    【解决方案1】:

    <ng-view>HTMLUnknownElement

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

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

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

    【讨论】:

    • 即使注册了元素名也不行^^ 一些chrome bug。
    猜你喜欢
    • 1970-01-01
    • 2014-09-01
    • 1970-01-01
    • 1970-01-01
    • 2016-11-13
    • 2014-05-13
    • 1970-01-01
    • 2018-04-17
    • 1970-01-01
    相关资源
    最近更新 更多