js动画封装

超、凢脫俗 2023-06-25 10:08 1阅读 0赞

## js动画封装 ##

凡是可以看到过渡效果的基本都可以用到js动画，都能引用

function $_animation(el, str, end, tm,fn) {
        clearInterval(el.timer);
        // 1：获取初始样式
        var start = getSty(el,str);
        start = parseFloat(start);
        // 2: 求差
        var s = end-start;
        // 3；执行动画
         el.timer = setInterval(function(){
            start += s/tm*16.7; // 每次属性值的变化(例如每次移动距离)
            if(s>0){// end>start 业务
                if(start>=end){
                    start = end;
                    clearInterval(el.timer);
                    el.style[str]=  str==='opacity'?start:start+'px';
                    // 执行下一个动画业务从合理
                    fn?fn():null; // 判断是否有参数；如果有参数；执行回调函数
                    // 强制同步
                    flag = true
                }else{
                    el.style[str]=  str==='opacity'?start:start+'px';
                }
    
            }else{
                // 处理end <start 业务
                if(start<=end){
                    start = end;
                    clearInterval(el.timer);
                    el.style[str]=  str==='opacity'?start:start+'px';
                    fn?fn():null;
                     // 强制同步
                     flag = true
                }else{
                    el.style[str]=  str==='opacity'?start:start+'px';
                }
            }
    
        },16.7)
      }
    
      function getSty(el, str) {
        var res;
        if (el.currentStyle) {
          // ie
          res = el.currentStyle[str];
        } else {
          // 非IE
          res = getComputedStyle(el)[str];
        }
    
        return res;
      }

发表评论取消回复

表情：

评论列表（有 0 条评论，1人围观）

还没有评论，来说两句吧...

相关阅读

相关 js动画封装

js动画封装凡是可以看到过渡效果的基本都可以用到js动画，都能引用 <!-- ani() 作用：动画给某个元素查看某个css 属性值

超、凢脫俗/ 2023年06月25日 10:08/ 0 赞/ 2 阅读

相关用JS封装一个简单的动画函数（超详细）

用JS封装一个简单的动画函数函数封装\_01 -------------------- 文章目录用JS封装一个简单的动画函数 PC端网页特效

左手的ㄟ右手/ 2022年12月04日 08:49/ 0 赞/ 144 阅读

相关 JS动画封装

简单的运动函数 var demo1=document.getElementById("demo1"); demo1.onmouseover=funct

叁歲伎倆/ 2022年08月04日 05:22/ 0 赞/ 173 阅读

相关 js实现图片旋转动画的封装

//图片动画封装 function SearchAnim(opts) { for(var i in SearchAnim.DEF

末蓝、/ 2022年07月16日 01:48/ 0 赞/ 183 阅读

相关 js缓动动画及其封装

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

古城微笑少年丶/ 2022年07月13日 23:27/ 0 赞/ 176 阅读

相关 js动画基本原理和简单封装

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8">

左手的ㄟ右手/ 2022年07月13日 23:27/ 0 赞/ 57 阅读

相关 JavaScript匀速动画封装

HTML部分 <span style="color:000000"><!doctype html> <html lang="en"> <head> <meta

女爷i/ 2022年06月01日 04:21/ 0 赞/ 228 阅读

相关 Vue_动画封装

我们写一个动画效果，如果在页面多处调用，就可以封装在一个组件里。使用插槽的形式。 eg： <fade :show='showfade'> <div>h

雨点打透心脏的1/2处/ 2022年05月20日 23:30/ 0 赞/ 214 阅读

相关 Vue_JS动画与Velocity.js动画

一.JS动画前面我们用css实现动画效果，那可不可以用JS来实现动画效果么？可以的在transition标签里定义触发事件 @before-enter：在进入动画

一时失言乱红尘/ 2022年05月20日 22:14/ 0 赞/ 237 阅读

相关封装animate动画

<style type="text/css"> { margin: 0; padding: 0; }

一时失言乱红尘/ 2021年09月02日 09:49/ 0 赞/ 456 阅读