I've modified code from this tutorial which animates a sliding div so that it works as a toggling menu. I was hoping it would degrade into normal hide-show in IE9. Which it is. But only one time. If I click the first button, it will toggle its div on and off. It works for all four like that. But after that first toggle, IE fails to show the divs again. I can verify that the ng-click is working through logging the index of the clicked button. For some reason though, it appears that the display property isn't being set to block. Is there a known issue where ngAnimate causes IE9 to break without an error, or have I missed something obvious?
2 Answers
Answers 1
In angularjs site you will find this:
Although most modern browsers have good support for CSS transitions and CSS animations, IE9 and earlier do not. If you want animations that are backwards-compatible with older browsers, consider using JavaScript-based animations, which are described in detail below.
practical: if you remove this line : transition: all 0.8s; you will see that all the browsers behave the same way.
Solutions:
Internet Explorer 9 was the last of the IE browsers to not support the transition property, or animations as you can see here, but is support conditional comments, so you could put fallback code into an IE9-only conditional comment, and deliver that as your solution to all IE9 (and below) users.
<!--[if lte IE 9]> <script src="animation-legacy-support.js"></script> <![endif]--> Or you can use the modernizr library like this:
if(!Modernizr.csstransitions) { // if not supported. //ADD YOUR javascirpt-based CODE HERE } or you can just make all the animation with jquery, use jquery 2.x for ie9+ or jquery 1.x for ie6+ as you can see here.
Note: An example with angular and jquery animation can be found in Animating ngClass with JavaScript chapter in angularjs site, in the bottom.
Answers 2
As far as I know css transitions are not supported in IE9 and earlier. So if you want to support these browsers you might use jQuery animations instead.
Hope this would be helpful.
0 comments:
Post a Comment