What is a promise in Javascript?

Question

LauraZ

Asked: 2020-07-11 10:16:45 +0800 CST 2020-07-11 10:16:45 +0800 CST 2020-07-11 10:16:45 +0800 CST

在 HTML 表单中按下输入提交后的 CSS 动画

772

原来我有这个简单的登录，我处理 Overhang.js 以在凭据错误的情况下显示一条消息。使用同一个插件，我可以在访问正确时显示一条消息，但在所有选项中，没有一个能完全说服我（UI/UX 问题）。

对于这种情况，当访问正确时，我想处理例如从“Enter”到“Entering”input类型的消息的变化。submit

或者它也可能是像 Bootstrap 模态一样使屏幕变暗的淡入淡出效果。

$(document).ready(function() {
  $('.background-image').on('webkitAnimationEnd', function(e) {
    $(this).addClass('visible');
  });
});

/* ---------- GENERAL ---------- */

* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  height: 100%;
}

body {
  background-color: #ebebeb;
  font-family: 'Open Sans', sans-serif;
  line-height: 1.5;
  margin: 0;
  min-height: 100%;
}

input {
  background-image: none;
  border: none;
  font: inherit;
  margin: 0;
  padding: 0;
  transition: all .3s;
}

/* ---------- ALIGN ---------- */

.align {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* ---------- GRID ---------- */

.grid {
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
  max-height: 500px;
  width: 80%;
}

/* ---------- LOGIN ---------- */

#login h2 {
  background: #0088a3;
  border-radius: 15px 15px 0 0;
  color: #fff;
  font-size: 28px;
  padding: 20px 26px;
  height: 100%;
}

#login h2 span[class*="fontawesome-"] {
  margin-right: 14px;
}

#login fieldset {
  background: #fff;
  border-radius: 0 0 10px 10px;
  padding: 20px 26px;
}

#login fieldset p {
  color: #777;
  margin-bottom: 14px;
}

#login fieldset p:last-child {
  margin-bottom: 0;
}

#login fieldset input {
  border-radius: 3px;
}

#login fieldset input[type="text"],
#login fieldset input[type="password"] {
  background: #eee;
  color: #777;
  padding: 4px 10px;
  width: 100%;
}

#login fieldset input[type="submit"] {
  background: #0088a3;
  color: #fff;
  display: block;
  margin: 0 auto;
  padding: 4px 0;
  width: 100px;
}

#login fieldset input[type="submit"]:hover {
  background: #0088a3;
  border-radius: 15px 2px;
  cursor: pointer;
}

#login fieldset input[type="submit"]:active {
  background: #0088a3;
  border-radius: 2px 15px;
  cursor: wait;
}

@import "compass/css3";
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.background-image {
  background: url('../images/bg.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  -webkit-animation-name: fade-in;
  -webkit-animation-duration: .5s;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 1s;
}

.background-image.visible {
  opacity: 1;
}

<body class="align">

  <div class="align background-image">

    <div class="grid">

      <div id="login">

        <h2><img src="images/banner-wh.png" alt="Logo" style="max-width: 100%; width: auto;"></h2>

        <form id="loginform" action="validarcode.php" method="POST" autocomplete="off">

          <fieldset>

            <p><label for="usuario">Usuario</label></p>
            <p><input type="text" name="txtusuario" id="usuario" autofocus></p>

            <p><label for="password">Contraseña</label></p>
            <p><input type="password" name="txtpassword" id="password"></p>

            <br><br>

            <p><input class="with-arrow" type="submit" name="Enviar" value="Ingresar"> <i class="icon-arrow-right"></i> </p>

            <br>

            <div style="font-size: 14px;color: #444;">¿Olvidó su contraseña?</div>
            <h1 style="font-size: 12px;color: #555;">Escríbanos a <a href="mailto:[email protected]?subject=Restablecer%20Contraseña">[email protected]</a></h1>

          </fieldset>

        </form>

      </div>

    </div>

  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <script src="assets/overhang.js"></script>
  <script src="assets/app.js"></script>

</body>

长话短说，我知道使用 JS 我可以alert通过按来显示它submit，但是我怎么能在 CSS 中调用动画呢？

function exito() {
  alert("Ingresando...");
  return true;
}

<input class="with-arrow" type="submit" name="Enviar" value="Ingresar" onclick="return exito();">

2 Answers

Voted

the-breaker · Answer 1 · 2020-07-11T12:35:07+08:00

这是代码工作的示例，在这种情况下，我在提交表单之前放置了动画和输入消息，然后您可以根据需要修改该内容。点击Ingresar动画会显示 4 秒（下面我解释如何更改该时间），然后表单将被提交。

$(document).ready(function() {
  $('.background-image').on('webkitAnimationEnd', function(e) {
    $(this).addClass('visible');
  });
});

function animar(){
  document.getElementById('eboton').className="hide";
  document.getElementById('animacion').className="preloader";
  document.getElementById('mensaje').className="mensaje";
  setTimeout(enviar, 4000);
}

function enviar(){
  document.getElementById('loginform').submit();
}

/* ---------- GENERAL ---------- */

* {
  box-sizing: inherit;
}

html {
  box-sizing: border-box;
  height: 100%;
}

body {
  background-color: #ebebeb;
  font-family: 'Open Sans', sans-serif;
  line-height: 1.5;
  margin: 0;
  min-height: 100%;
}

input {
  background-image: none;
  border: none;
  font: inherit;
  margin: 0;
  padding: 0;
  transition: all .3s;
}


/* ---------- ALIGN ---------- */

.align {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* ---------- GRID ---------- */

.grid {
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
  max-height: 500px;
  width: 80%;
}


/* ---------- LOGIN ---------- */

#login h2 {
  background: #0088a3;
  border-radius: 15px 15px 0 0;
  color: #fff;
  font-size: 28px;
  padding: 20px 26px;
  height: 100%;
}

#login h2 span[class*="fontawesome-"] {
  margin-right: 14px;
}

#login fieldset {
  background: #fff;
  border-radius: 0 0 10px 10px;
  padding: 20px 26px;
}

#login fieldset p {
  color: #777;
  margin-bottom: 14px;
}

#login fieldset p:last-child {
  margin-bottom: 0;
}

#login fieldset input {
  border-radius: 3px;
}

#login fieldset input[type="text"],
#login fieldset input[type="password"] {
  background: #eee;
  color: #777;
  padding: 4px 10px;
  width: 100%;
}

.hide{
  display: none;
}
.with-arrow {
  background-image: none;
  border: none;
  font: inherit;
  margin: 0;
  padding: 0;
  transition: all .3s;
  background: #0088a3;
  color: #fff;
  display: block;
  margin: 0 auto;
  padding: 4px 0;
  width: 100px;
  text-align: center;
}

.with-arrow:hover {
  background: #0088a3;
  border-radius: 15px 2px;
  cursor: pointer;
}

.mensaje {
  text-align: center;
}

.preloader {
  width: 70px;
  height: 70px;
  border: 10px solid #eee;
  border-top: 10px solid #666;
  border-radius: 50%;
  animation-name: girar;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;
  margin-left: auto;
  margin-right: auto;
}
@keyframes girar {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@import "compass/css3";
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

.background-image {
  background: url('../images/bg.jpg') no-repeat center center fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  -webkit-animation-name: fade-in;
  -webkit-animation-duration: .5s;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 1s;
}

.background-image.visible {
  opacity: 1;
}

<body class="align">
  <div class="align background-image">
    <div class="grid">
      <div id="login">
        <h2><img src="images/banner-wh.png" alt="Logo" style="max-width: 100%; width: auto;"></h2>
        <form id="loginform" action="validarcode.php" method="POST" autocomplete="off">
          <fieldset>
            <p><label for="usuario">Usuario</label></p>
            <p><input type="text" name="txtusuario" id="usuario" autofocus></p>
            <p><label for="password">Contraseña</label></p>
            <p><input type="password" name="txtpassword" id="password"></p>
            <br><br>
            <div id="animacion" class="hide"></div>
            <p id="mensaje" class="hide">Ingresando...<p>
            <p><a id="eboton" class="with-arrow" onclick="animar()" name="Enviar" > Ingresar <i class="icon-arrow-right"></i></a> 
            </p>
            <br>
            <div style="font-size: 14px;color: #444;">¿Olvidó su contraseña?</div>
            <h1 style="font-size: 12px;color: #555;">Escríbanos a <a href="mailto:[email protected]?subject=Restablecer%20Contraseña">[email protected]</a></h1>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
  <script src="assets/overhang.js"></script>
  <script src="assets/app.js"></script>
</body>

稍微解释一下示例的解决方案：

必须先将<input type="submit" value="Ingresar">改为 a<a>Ingresar</a>以防止表单被立即提交，并且可以看到动画。

Luego debes crear una función de enviar() para enviar el formulario luego de mostrar la animación.

function enviar(){
  document.getElementById('loginform').submit();
}

Luego debes colocar una función animar() al <a>Ingresar</a> para que se muestren las animaciones al hacer click en Ingresar.

El paso mas importante es darle tiempo a la animación para que se muestre antes de que se envíe el formulario, lo puedes hacer con setTimeout(funcion(), tiempo);, en este caso le puse 4 segundos:

setTimeout(enviar, 4000);

Por ultimo en la función animar() debes hacer que aparezcan los objetos animados que quieres mostrar y ocultar el boton de ingresar antes de que el formulario se envíe.

function animar(){
  /*
  Mostrar y Ocultar Elementos
  */
  setTimeout(enviar, 4000);
}

Y eso fue lo que se hizo a grandes rasgos. Espero te sea de ayuda. Saludos.

Joel Muñoz Moran · Answer 2 · 2020-07-11T10:31:12+08:00

我认为您可以使用 javascript：首先更改表单的正常行为，避免重定向，然后启动所需的动画，然后从 javascript 进行重定向。您甚至可以根据特定条件触发重定向。例子。

html表单：

$("#form1").on("submit",function(e) {
//cancelas rediccion
   e.preventDefault();
// codigo para lanzar animacion css, etc.
  console.log("tu efecto aqui")
   $("#login").show( "slow" );

});

/* ---------- GENERAL ---------- */

* {
  box-sizing: inherit;
}



input {
  background-image: none;
  border: none;
  font: inherit;
  margin: 0;
  padding: 0;
  transition: all .3s;
}


/* ---------- ALIGN ---------- */

.align {
  align-items: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
}


/* ---------- GRID ---------- */

.grid {
  margin-left: auto;
  margin-right: auto;
  max-width: 500px;
  max-height: 500px;
  width: 80%;
}


/* ---------- LOGIN ---------- */

#login h2 {
  background: #0088a3;
  border-radius: 15px 15px 0 0;
  color: #fff;
  font-size: 28px;
  padding: 20px 26px;
  height: 100%;
}

#login h2 span[class*="fontawesome-"] {
  margin-right: 14px;
}

#login fieldset {
  background: #fff;
  border-radius: 0 0 10px 10px;
  padding: 20px 26px;
}

#login fieldset p {
  color: #777;
  margin-bottom: 14px;
}

#login fieldset p:last-child {
  margin-bottom: 0;
}

#login fieldset input {
  border-radius: 3px;
}

#login fieldset input[type="text"],
#login fieldset input[type="password"] {
  background: #eee;
  color: #777;
  padding: 4px 10px;
  width: 100%;
}

#login fieldset input[type="submit"] {
  background: #0088a3;
  color: #fff;
  display: block;
  margin: 0 auto;
  padding: 4px 0;
  width: 100px;
}

#login fieldset input[type="submit"]:hover {
  background: #0088a3;
  border-radius: 15px 2px;
  cursor: pointer;
}

#login fieldset input[type="submit"]:active {
  background: #0088a3;
  border-radius: 2px 15px;
  cursor: wait;
}

@import "compass/css3";
@-webkit-keyframes fade-in {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

 fixed;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  opacity: 0;
  -webkit-animation-name: fade-in;
  -webkit-animation-duration: .5s;
  -webkit-animation-timing-function: ease-in;
  -webkit-animation-iteration-count: 1;
  -webkit-animation-delay: 1s;
}

.background-image.visible {
  opacity: 1;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<form id="form1" method="post">  
      <input type="submit">
    </form>
    
      <div id="login" style="display:none">

        <h2><img src="images/banner-wh.png" alt="Logo" style="max-width: 100%; width: auto;"></h2>

        <form id="loginform" action="validarcode.php" method="POST" autocomplete="off">

          <fieldset>

            <p><label for="usuario">Usuario</label></p>
            <p><input type="text" name="txtusuario" id="usuario" autofocus></p>

            <p><label for="password">Contraseña</label></p>
            <p><input type="password" name="txtpassword" id="password"></p>

            <br><br>

            <p><input class="with-arrow" type="submit" name="Enviar" value="Ingresar"> <i class="icon-arrow-right"></i> </p>

            <br>

            <div style="font-size: 14px;color: #444;">¿Olvidó su contraseña?</div>
            <h1 style="font-size: 12px;color: #555;">Escríbanos a <a href="mailto:[email protected]?subject=Restablecer%20Contraseña">[email protected]</a></h1>

          </fieldset>

        </form>

      </div>

在 HTML 表单中按下输入提交后的 CSS 动画

HTML button that sends you to another page

Why do I get the error "Call to undefined function mysql_connect()"?

How to create an HTML button that works as a link?

How to separate a String in Java. How to use split()

Filter by dates in sql server

How to limit the number of decimal places in a double?

For each in JavaScript?

Position footer ALWAYS glued to the footer

Definitive Guide to Type Conversion in Java

How to properly compare Strings (and objects) in Java?