Question

var Buttons = new Array();
var AnimEnd = new Array();
var Called = new Array();

function Start () {
    Buttons = document.getElementsByClassName("google_button-main");

    for (var i = 0; i < Buttons.length; i++)
    {
        Buttons[i].onmousedown = (e) => {
            var Animator = e.target.previousElementSibling;

            Called[i] = false;
            AnimEnd[i] = false;

            Animator.setAttribute("Animated", "true");
            Animator.ontransitionend = (f) => {
                if (Called[i] == false)
                {
                    if (AnimEnd[i] == true)
                    {
                        Animator.setAttribute("Animated", "false");
                    }
                }
                    Called[i] = true;
                    AnimEnd[i] = true;
            }
        }

        Buttons[i].onmouseup = (e) => {
            var Animator = e.target.previousElementSibling;

            if (AnimEnd[i] == true)
            {
                Animator.setAttribute("Animated", "false");
            }

            AnimEnd[i] = true;
        }
    }
}

.google_button-main {
    height: 100%;
    width: 100%;

    border: none;

    background-color: black;

    z-index: -1;
    pointer-events: auto;
}

.google_button-animator[animated="false"] {
    height: 0px;
    width: 0px;

    border-radius:50%;
    background-color: rgba(255, 255, 255, 0.0);

    transition: background-color 0.4s ease, height 0.4s step-end, width 0.4s step-end, border-radius 0.4s step-end;
}

.google_button-animator {
    position: absolute;
    pointer-events: none;

    z-index: 1;
}

.google_button-animator[animated="true"] {
    height: 50px;
    width: 50px;

    background-color: rgba(255, 255, 255, 0.5);
    border-radius: 0%;

    transition: height 0.4s ease, width 0.4s ease, border-radius 0.4s ease;
}

.google_button-wrapper {
    position: relative;

    pointer-events: none;

    height: 50px;
    width: 50px;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" type="text/css" media="screen" href="main.css" />
    <script src="main.js"></script>
</head>
<body onload="Start();">
    <div class="google_button-wrapper">
        <div class="google_button-animator" animated="false">

        </div>

        <button class="google_button-main">
            Knopf
        </button>
    </div>
</body>
</html>

我想像Google按钮一样制作按钮动画。

我希望动画可以在按下按钮和按下按钮时播放，但只能在上一个动画完成时播放。所以我添加了“ AnimEnd”数组。

此后，我遇到了一个问题，即转换完成后ontransitionend-function被调用了5次，所以我添加了“ Called”数组。

我的代码有效，但是当我单击按钮（在下面的代码段中）时，JavaScript-onmouseup停止运行。

我试图通过控制台日志解决它，但是我找不到问题！

单击按钮快速调试JavaScript

0 个答案: