Question

当用户点击表单https://github.com/teesloane/Auth-Boss上的提交时，我有一个页面加载动画的工作示例。我试图将动画更改为不同的东西，但更新的动画不会发生在容器内，甚至在用户点击该表单上的提交之前加载。可以找到非工作示例here

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

<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>

Dockerfile

public Core()
 {
    setLayout(new BorderLayout());      
    Dimension screenSize = Toolkit.getDefaultToolkit().getScreenSize();
    setPreferredSize(screenSize);

    //REMOVE THIS WHEN DONE-----------------------//
    getInputMap(JComponent.WHEN_IN_FOCUSED_WINDOW).put(KeyStroke.getKeyStroke(KeyEvent.VK_ESCAPE, 0, false), "leave");
    getActionMap().put("leave", new AbstractAction() {
        private static final long serialVersionUID = 1L;
        @Override
        public void actionPerformed(ActionEvent e) {
            System.exit(0);
        }
    });
    //-----------------------------------------//

    t = new Thread(this);
    running = true;
    t.start();

    new Display(TITLE, screenSize, this);
}
@Override
public void run() 
{
    while(running)
    {
        try 
        {
            Thread.sleep(9);
        }
        catch (InterruptedException e) 
        {   
            e.printStackTrace();
        }
        //ADD UPDATE
        //ADD REPAINT();
    }
}

Answer 1

.loader-container

中有些东西乱七八糟

实际上只有我做过的事情，我已经把这个课程从工作解决方案中解放出来并添加到新课程中并且有效。

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

以下是适合您的更新解决方案。

https://jsfiddle.net/v9dhqvrc/

加载动画没有发生在容器中

1 个答案: