原生JS实现 fadeIn / fadeOut 方法

最新推荐文章于 2019-08-31 17:00:27 发布

weixin_33753003

最新推荐文章于 2019-08-31 17:00:27 发布

阅读量260

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/sallency/blog/864657

版权

2019独角兽企业重金招聘Python工程师标准>>>

js 源码：

Object.prototype.fadeIn = function(time, callback) {
    var el = this;
    el.style.opacity = 0;
    var st = setInterval(function() {
        el.style.opacity = parseFloat(el.style.opacity) + 0.01;
        if (el.style.opacity >= 1) {
            clearInterval(st);
            if (callback !== undefined) {
                callback();
            }
        }
    }, time);
    return this;
}

Object.prototype.fadeOut = function(time, callback) {
    var el = this;
    el.style.opacity = 1;
    var st = setInterval(function() {
        el.style.opacity = parseFloat(el.style.opacity) - 0.01;
        if (el.style.opacity <= 0) {
            clearInterval(st);
            if (callback !== undefined) {
                callback();
            }
        }
    }, time);
    return this;
}

window.onload = function() {
    var el = document.querySelector(".spinner");
    el.fadeOut(50, function() {
        el.fadeIn(50, function() {
            console.log("finished");
        });
    });
}

示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        .spinner {
            width: 60px;
            height: 60px;
            position: relative;
            margin: 100px auto;
        }

        .double-bounce-outer, .double-bounce-inner {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background-color: #67CF22;
            opacity: 0.6;
            position: absolute;
            top: 0px;
            left: 0px;
            -webkit-animation: bounce 2.0s infinite ease-in-out;
            animation: bounce 2.0s infinite ease-in-out;
        }

        .double-bounce-inner {
            -webkit-animation-delay: -1.0s;
            animation-delay: -1.0s;
        }
        
        @keyframes bounce {
            0%, 100% {
                transform: scale(0.0);
            } 50% {
                transform: scale(1.0);
            }
        }

        @-webkit-keyframes bounce {
            0%, 100% {
                -webkit-transform: scale(0.0);
            } 50% {
                -webkit-transform: scale(1.0);
            }
        }
    </style>
</head>
<body>
<div class="spinner">
    <div class="double-bounce-outer"></div>
    <div class="double-bounce-inner"></div>
</div>
<script type="text/javascript">
Object.prototype.fadeIn = function(time, callback) {
    var el = this;
    el.style.opacity = 0;
    var st = setInterval(function() {
        el.style.opacity = parseFloat(el.style.opacity) + 0.02;
        if (el.style.opacity >= 1) {
            clearInterval(st);
            if (callback !== undefined) {
                callback();
            }
        }
    }, time);
    return this;
}

Object.prototype.fadeOut = function(time, callback) {
    var el = this;
    el.style.opacity = 1;
    var st = setInterval(function() {
        el.style.opacity = parseFloat(el.style.opacity) - 0.02;
        if (el.style.opacity <= 0) {
            clearInterval(st);
            if (callback !== undefined) {
                callback();
            }
        }
    }, time);
    return this;
}

window.onload = function() {
    var el = document.querySelector(".spinner");
    el.fadeOut(20, function() {
        el.fadeIn(20, function() {
            console.log("finished");
        });
    });
}
</script>
</body>
</html>

复制粘贴保存打开见效果......

转载于:https://my.oschina.net/sallency/blog/864657