CODEWITHSUNDEEP
cssangularjsng-animateanimate.css
Castiel
Castiel

Reputation: 93

Ng-Animate doesn't work with Chrome

I have some compatibility problems between Chrome and Firefox. I use ng-view to create an animation (with ng-ng-enter and leave). Here is an example with a 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;
 }

When I execute the plunker Firefox, no problems, I have an animation. But when I execute in Chrome, I did not work, but I'm prefix -webkit-

What is the problem ?

Upvotes: 0

Views: 940

Answers (1)

Vinay K
Vinay K

Reputation: 5572

<ng-view> is a HTMLUnknownElement.

Seems like animations doesn't work with HTMLUnknownElements in chrome.

Changing <ng-view> to <div ng-view> worked for me.

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

Upvotes: 1

Related Questions