animation not working for the second time

问题

I'm adding animation whenever submit button clicks without selecting any option.
but It is working only for the first time.

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>

I have tried debug my code an I found that animation is working for the second time too but it's very fast, that's why my eyes aren't able to see the second animation.
Please help here !

回答1:

Problem

When you change a class because of an event such as "submit", "click", etc. it is still has that class when that event happens again. CSS animations start when the class is assigned so if you want that animation to happen again, you have to remove the class so when that event triggers again it will assign that class again thereby starting that animation once more.

Changes

HTML

<form> is assigned id='main'
- we will use the HTMLFormElement interface
<select> [id] and [name] are now 'select1'
First <option> changed [value=] from ~~"-1"~~ to "" and ~~[selected][disabled]~~ is removed
- our condition will be simplified being based on .value
~~[id]~~ is removed from <button>
- we will register the <form> to the "submit" event
- any <button> without a [type] attribute that's within a <form> will trigger a "submit" event
- FYI this is true when the user clicks the enter or return key as well.
~~id='name'~~ to [id] and [name] to 'name1' never use "name" as a value to HTML attributes.

CSS

~~.options_not_selected~~ to .error and ~~left_right~~ to shake
- for ascetic reasons only, underscores are plain ugly

JavaScript

Details are commented in Demo

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>

来源：https://stackoverflow.com/questions/61406368/animation-not-working-for-the-second-time

标签

javascript

css-animations