关于HTML元素点击的时候，背景颜色秒进，缓缓退出的方法

废话不多说，上代码

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
    <style>
    html {}

    * {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .btn.active,
    .active:active {
        transition-duration: 0s;
        background-color: #d9d9d9;
    }

    .btn {
        transition-duration: 3s;
    }

    li {
        height: 50px;
        font-size: 30px;
        line-height: 50px;
        text-align: center;
    }

    li:hover {
        cursor: pointer;
    }
    </style>
</head>

<body>
    <ul>
        <li class="btn">123131123131</li>
        <li class="btn">li</li>
        <li class="btn">li</li>
        <li class="btn">li</li>
    </ul>
    <script>

    function fn() {
        // 在body里加个事件
        document.body.addEventListener('mousedown', function(e) {
            var target = e.target;
            // 这里的类名btn就加在你想实现效果的元素里
            if (target.className.indexOf('btn') !== -1) {
                target.classList.add('active');
            }
        }, false);
        document.body.addEventListener('mouseup', function(e) {
            var target = e.target;
            if (target.className.indexOf('btn') !== -1) {
                target.classList.remove('active');
            }
        }, false);
    }
   fn();

    </script>
</body>

</html>