时间戳

首页 > 解决方案 > 动画第二次不起作用

javascript - 动画第二次不起作用

问题描述

每当单击提交按钮而不选择任何选项时，我都会添加动画。
但它只是第一次工作。 

const select_node = document.getElementById("st1"); // html select tag
const submit_btn = document.getElementById("submit_btn"); // html submit button
   
submit_btn.addEventListener('click',(e)=>{
  e.preventDefault();
  if(select_node.classList.contains('options_not_selected')){    
    select_node.classList.remove('options_not_selected');
 }
 if(select_node[select_node.selectedIndex].disabled == true){
    select_node.classList.add('options_not_selected');
   }
} ,false); //addEventListener
.options_not_selected{
	animation-name: left_right;
	animation-duration: 0.15s;
	animation-direction: alternate;
	animation-timing-function: ease-in-out;
	animation-iteration-count: 4; 
}
@keyframes left_right{
	from{
		transform: translateX(0px);
	}
	to{
		transform: translateX(30px);
	}
}
<form>
  <label for="st1">Choose from here :</label>
  <select name="st1" id="st1">
    <option value='-1' selected disabled>Choose</option>
    <option value='1'>one</option>
    <option value='2'>two</option>
    <option value='3'>three</option>
    <option value='4'>four</option>
  </select>

  <div>
    <label for='name'>Name</label>
    <input type='text' id='name'>
  </div>
  
  <button id="submit_btn">Submit</button>

</form>

我已经尝试调试我的代码，我发现动画第二次也可以工作，但它非常快，这就是为什么我的眼睛无法看到第二个动画。
请在这里帮忙！

标签： javascriptcss-animations

解决方案

问题

当您因为诸如 , 等事件而更改"submit"类"click"时，当该事件再次发生时，它仍然具有该类。CSS 动画在分配类时开始，因此如果您希望该动画再次发生，则必须删除该类，以便当该事件再次触发时，它将再次分配该类，从而再次启动该动画。

变化

HTML

  • <form>被安排了id='main'

  • <select> [id]现在[name]是'select1'

  • 首先<option>从[value=]_"-1"到""和[selected][disabled]已移除

    • 我们的条件将被简化为.value

  • [id]被删除<button>

    • 我们将注册<form>到"submit"活动
    • 任何<button>没有 a中的[type]属性的都<form>将触发"submit"事件
    • 仅供参考，当用户也单击enterorreturn键时也是如此。

  • id='name'和从不使用“名称”作为 HTML 属性的值[id]。[name]'name1'

CSS

  • .options_not_selected到.error和left_right至shake
    • 仅出于苦行的原因，下划线很丑

JavaScript

细节在Demo中注释

演示

<!DOCTYPE html>
<html>

<head>
  <meta charset='utf-8'>
  <style>
    #select1.error {
      animation-name: shake;
      animation-duration: 0.15s;
      animation-direction: alternate;
      animation-timing-function: ease-in-out;
      animation-iteration-count: 4;
    }
    
    @keyframes shake {
      from {
        transform: translateX(0px);
      }
      to {
        transform: translateX(30px);
      }
    }
  </style>
</head>

<body>
  <form id='main'>
    <label for="select1">Choose from here: </label>
    <select id="select1" name='select1'>
      <option value=''>Choose</option>
      <option value='1'>Alpha</option>
      <option value='2'>Beta</option>
      <option value='3'>Gamma</option>
      <option value='4'>Delta</option>
    </select>

    <div>
      <label for='name1'>Name: </label>
      <input id='name1' name='name1' type='text'>
    </div>
    <button>Submit</button>
  </form>
  <script>
    /*
        Form controls are: 
        <button>
        <fieldset>
        <input> (exception type="image")
        <object>
        <output>
        <select>
        <textarea>
        */
    /*
    - Register form#main to submit event
        
    = document.forms.main 
      - is equivelant to -
      document.getElementById('main');
      
    = .onsubmit = requireOpt;
      - is equivelant to -
      .addEventListener('submit', requireOpt);
    */
    document.forms.main.onsubmit = requireOpt;

    // Event handler always passes Event Object
    function requireOpt(event) {

      /*
      - Collect all form controls into a HTML Collection
      - Prefix any form control #id or [name] with ui. to
        reference them
      */
      const ui = this.elements;
      const sel = ui.select1;

      // if select#select1 has no value...
      if (!sel.value) {

        // assign .error class to it...
        sel.classList.add('error');

        /*
        - stop the submit event default behavior:
          - form sends data to a server
          - form resets
        */
        event.preventDefault();
      }
      // Remove .error class from select#select1 after 1 sec
      setTimeout(function() {
        sel.classList.remove('error');
      }, 1000);
    }
  </script>
</body>

</html>

推荐阅读