JS implementation of animation compatibility transition and transform case analysis _javascript Skills

This paper illustrates the transition and transform methods of JS to realize animation compatibility. Share to everyone for your reference, specific as follows:

Today in the development of pure hand JS to create a picture scrolling effect, encountered an unpleasant compatibility event.

Before JS set picture scrolling animation effect is as follows:

var addslidestyle = function (time, leftwidth) {Time
 = time | | 0;
 Leftwidth = Leftwidth | | 0;
 Return ' Transition:all ' + time + ' s ease-in-out; Transform:translate3d (' + leftwidth + ' px, 0px, 0px); ';
};

Use the following:

Slideulobj.style = Addslidestyle ();

The above use JS set style style to achieve, in the PC side of the display of a variety of good, can automatically scroll, one to the phone above a variety of incompatible on the out. Adding a-webkit-prefix to the Addslidestyle is not resolved.

As a then, a variety of search is the original mobile compatibility problem, changed to JS set animation:

var settransition = function (obj, time) {time
 = time | | 0;
 var style = ' All ' + time + ' s ease-in-out ';
 Obj.style.webkitTransition = style;
 Obj.style.transition = style;
var settransform = function (obj, leftwidth) {
 leftwidth = Leftwidth | | 0;
 var style = ' Translate3d (' + leftwidth + ' px, 0px, 0px ');
 Obj.style.webkitTransform = style;
 Obj.style.transform = style;
var setanimate = function (obj, time, leftwidth) {
 settransition (obj, time);
 SetTransform (obj, leftwidth);
};

The call is as follows:

Setanimate (Slideulobj);

Knowledge small Science popularization: which sets the various browser compatibility format as follows

Webkitproperty
mozproperty
msproperty
oproperty
Property

The call is as follows:

Element.style.webkitTransform = "";
Element.style.MozTransform = "";
Element.style.msTransform = "";
Element.style.OTransform = "";
Element.style.transform = "";

For more information on JavaScript-related content readers can view the site topics: "JavaScript Graphics Drawing Skills Summary", "JavaScript animation effects and Skills summary", "JavaScript switching effects and techniques summary", " JavaScript Search Algorithm Skills summary, javascript error and debugging skills Summary, JavaScript data structure and algorithm skills summary, JavaScript traversal algorithm and skills summary and JavaScript mathematical Operational Usage Summary

I hope this article will help you with JavaScript programming.