Shulou(Shulou.com)06/01 Report--

This article mainly introduces the relevant knowledge of "how to use JavaScript motion function". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to use JavaScript motion function" can help you solve the problem.

The motion function is a function encapsulated by ourselves.

The effect is to change the css style not at once, but step by step. The execution effect looks like an animation / motion complete css style change.

In the actual project, the framework has its own motion function. We currently encapsulate a simple motion function that is compatible with multiple attributes.

Motion function part:

Document * {margin: 0; padding: 0;} div {width: 100px; height: 100px; background: rgb (231,12,48); margin: 0 auto; opacity: 0.3; / * transition: 3s * /} p {width: 100px; height: 100px; background: black; position: fixed; top: 200px; left: 50px;} Click var oDiv = document.querySelector ('div'); var oBtn = document.querySelector (' button') Var oP = document.querySelector ('p') oBtn.addEventListener ('click',function () {move (oDiv, {width:1800,height:900,opacity:1}, function () {oDiv.style.background =' black'})) }) / / Motion function naming / / move Motion function / / @ param object element label object / / @ param object object to execute the css attribute of the motion and the final value / / @ param function callback callback function executed at the end of the motion / / The default value is the empty function function move (element Object, callback = function () {}) {/ / define the number of variable storage timers let num = 0 / / Loop traversal parameter two (object) / / use the for...in loop to define the variable for (let type in object) {/ / type is the attribute of the parameter 2 object, that is, the css style attribute to be moved / / object [type] is the property of the parameter 2 object The value is the final value / / timer of the css style to be moved plus one num++ / / the starting value, that is, the original value obtained, is compatible with the transparent writing method let startVal = (type = = 'opacity')? Window.getComputedStyle (element) [type] * 100: parseInt (window.getComputedStyle (element) [type]); / / the ending value, that is, the attribute value corresponding to the entered attribute, is compatible with the transparency writing let endVal = (type = = 'opacity')? Object [type] * 100: object [type]; / / timer starts, time records timer number let time = setInterval (function () {/ / set step value = end value-start value / 10 let step = (endVal-startVal) / 10 / / rounding up if the step size is greater than 0, otherwise rounding down step = step > 0? Math.ceil (step): Math.floor (step); / / assign the initial value + = step value to the initial value startVal + = step; / / assign the new step value to the css style compatible transparency element.style of the label object [type] = (type = = 'opacity')? StartVal / 100: startVal + 'px'; / / if the initial value equals the final value if (startVal = endVal) {/ / clear timer clearInterval (time) / / variable minus 1 means that one timer is missing / / num--; / / when the timer executed is 0, all timers clear if (num = 0) {callback () }, 20)}}

Running result:

This is the end of the introduction to "how to use the JavaScript Motion function". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.