加载动画不会在容器中发生

Question

当用户在表单上点击提交时，我有一个页面加载动画的工作示例 here. Im trying to change the animation to something different but the newer animation is not happening inside the container and is loading even before the user hits submit on that form. The non working example can be found here

谁能帮我理解为什么这个动画没有在容器内发生，为什么它在页面加载时运行？

var myForm = document.getElementById('needs-validation');
myForm.addEventListener('submit', showLoader);
function showLoader(e) {
  this.querySelector('.loader-container').style.display = 'block';
  // the line below is just for the demo, it stops the form from submitting
  // so that you can see it works. Don't use it
  e.preventDefault();
}

#needs-validation {
      /* .loader-container will be positionned relative to this */
      position: relative;
    }
    
    .loader-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    .loader {
        display: block;
        position: relative;
        left: 50%;
        top: 50%;
        width: 150px;
        height: 150px;
        margin: -75px 0 0 -75px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #9370DB;
        -webkit-animation: spin 2s linear infinite;
        animation: spin 2s linear infinite;
    }
    .loader:before {
        content: "";
        position: absolute;
        top: 5px;
        left: 5px;
        right: 5px;
        bottom: 5px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #BA55D3;
        -webkit-animation: spin 3s linear infinite;
        animation: spin 3s linear infinite;
    }
    .loader:after {
        content: "";
        position: absolute;
        top: 15px;
        left: 15px;
        right: 15px;
        bottom: 15px;
        border-radius: 50%;
        border: 3px solid transparent;
        border-top-color: #FF00FF;
        -webkit-animation: spin 1.5s linear infinite;
        animation: spin 1.5s linear infinite;
    }
    @-webkit-keyframes spin {
        0%   {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }
    @keyframes spin {
        0%   {
            -webkit-transform: rotate(0deg);
            -ms-transform: rotate(0deg);
            transform: rotate(0deg);
        }
        100% {
            -webkit-transform: rotate(360deg);
            -ms-transform: rotate(360deg);
            transform: rotate(360deg);
        }
    }

<form id="needs-validation">
    <p>First name: <input type="text"></p>
    <p>Last name: <input type="text"></p>
    <p>Age: <input type="text"></p>
    <button type="submit">Next</button>
    <!-- insert your loader container here, inside the <form> element -->
    <div class="loader-container">
      <div class="loader"></div>
    </div>
</form>

Answer 1

你的 .loader-container

中有些乱七八糟的东西

实际上我所做的唯一一件事是，我从工作解决方案中提取了这个 class 并添加到新解决方案中并且它有效。

在您的新解决方案中，您首先缺少 display:none。

这是为您提供的更新解决方案。

https://jsfiddle.net/v9dhqvrc/

加载动画不会在容器中发生

loading animation not happening in container

javascript

html

css

css-loader