javascript toggle method second click delay

Question

In the below javascript code, I have a check box in the html. When I click the checkbox, a text box slides down and I enter my text. When I click the check box again, the text box disappears. See the screenshot

Here is my code.

  const openModal = document.getElementById('mark-as-gift');
  const modalBg = document.querySelector('.addtnew');
  
  openModal.addEventListener('click', openModalBtn);
 
  function openModalBtn() {
     modalBg.classList.toggle('menscart2');
      
  }

What I would like to do is 3 second delay when I clicked the check box the second time. The reason is that When I clicked the check box for the first time, text area and add-to-cart button move together. But, when clicked the check box a second time to close the text area, add-to-cart button moves up faster than text area and overlaps on top of the text area and then text area disappears. I do not want that. What I want is that text area and add-to-cart button moves together when I clicked the check box. Thanks

Here is Shopify Liquid and HTML CSS code

  {% if current_variant.available %}
    <!-- GIFT NOTE -->
  <div class="box-mens-wrap1">
    <div class="mark-gift-wrapper mark-gift-wrapper1">
      

      <input type="hidden" name="properties[Mark As Gift]" value="No" style="display:inline-block">
      <input  id="mark-as-gift" type="checkbox" name="properties[Mark As Gift]" value="Yes" style="display:inline-block; vertical-align:">
      <label for="mark-as-gift" style="margin:0;display: inline-block;font-size:1em;font-family: 'proxima-nova', sans-serif !important; padding-top: 10px;"><ls-static-482034>{{'products.product.gift_text_1' | t}}</ls-static-482034></label>
      
        
        
      <div class="line-item-property__field gift_note gift_note1">
        <label for="Gift Note" class="closegift"></label>
        <textarea class="textgift" placeholder="{{'products.product.note_text' | t}}" maxlength="250" id="Gift Note" name="properties[Gift Note]" style="width: 100%;"></textarea>
      </div>
      

    </div>
      <div class="small--one-third medium-up--one-fifth mensqty">
      {%- if settings.quantity_enable and current_variant.available -%}
        
        <div class="product__quantity product__quantity--{{ settings.variant_type }}">
          {%- render 'quantity-input', id: section_id, qty: 1, min: 1 -%}
        </div>
      {%- endif -%}
    </div>
  </div>
    <!-- END gift not -->
  {% else %}
    <div class="prepend-2 append-2 text-center" style="background:#333;padding:10px;">
      <span style="font-size:14px;font-family:'Futura' !important;color:#ccc;"><ls-static-197559>Out of Stock</ls-static-197559></span>
    </div>
  {%- endif -%}
  
  <div id="form-actions" class="grid">

    <div class="grid__item small--two-thirds medium-up--four-fifths menscart">

      {%- liquid
        assign default_text = 'products.product.add_to_cart' | t
        assign button_text = 'products.product.add_to_cart' | t
        if template == 'product.preorder'
          assign default_text = 'products.product.preorder' | t
          assign button_text = 'products.product.preorder' | t
        endif
        unless current_variant.available
          assign button_text = 'products.product.sold_out' | t
        endunless
      -%}

      {% if current_variant.available %}
        <button type="button"
          name="add"
          id="AddToCart-{{ section_id }}"
          class="btn btn--full add-to-cart{% if enable_dynamic_buttons %} btn--secondary{% endif %} addtnew"
          style="background-color: #ffffff !important; width: 100% !important; border: 1px solid #ffffff !important;"
          {% unless current_variant.available %} disabled="disabled"{% endunless %}
          >
          <span id="AddToCartText-{{ section_id }}" data-default-text="{{ default_text }}" class="addtocartknew">
            {{ button_text }}
          </span>
        </button>
      {%- endif -%}

    </div>
  </div>
  
  <!-- Extend -- Add offer element -->
  <div id="extend-offer" class="extend-offer-mens hide"></div>
  <!-- Extend -- End Extend code -->

  <textarea id="VariantsJson-{{ section_id }}" class="hide" aria-hidden="true" aria-label="Product JSON">
    {{ product.variants | json }}
  </textarea>
  {%- if product.options.size > 1 -%}
    <textarea id="CurrentVariantJson-{{ section_id }}" class="hide" aria-hidden="true" aria-label="Variant JSON">
      {{ current_variant | json }}
    </textarea>
  {%- endif -%}
{%- endform -%}



</div>

<!-- Extend -- Load product integration script -->
{% render 'extend-product-integration' %}
<!-- Extend -- End Extend code -->

<style>
  
  
  .mark-gift-wrapper {
  
    margin-bottom: 10px;
  }
  
 
  .box-mens-wrap1 {
  
    display: flex !important;
    flex-direction: row-reverse;
    justify-content: space-between;
    width: 100%;
    margin: 0px; 
    
  }
  
  
  
  .mark-gift-wrapper1 {
       outline: 1px solid #fff;
       width: 100%;
       height: 43.5px;
       margin-left: 15px;
       
       
  }
  
  
  .menscart {
    width: 100%;
    padding-bottom: 20px;
    
  }
  
  .menscart2 {
  
     margin-top: 120px;
    transition-duration: 2s;
  }
  

  
  .gift_note1 {
    margin-top: 10px;
    width: 100%;
  }
  
  .textgift2 {
  
    border: none !important;
  }
  
  
  @media (max-width: 768px) {
    .mark-gift-wrapper1 { 
    
        margin-left: 10px;
        
    }
    
   .menscart2 {
  
     margin-top: 110px;
    }
    
  }
  
</style>

Answer 1

I'm not sure it would work because I don't see in the code the text area element disappear (I think there is something missing), and I can't check it out on Shopify right now. But think about it like this: you use transition-duration (in other words: delay) immediately when you assign a new class to the button, so it moves slower than normal, but when you toggle it again (removing the menscart2 class name), the delay doesn't exist at all which might cause the button to move normally (or in a different speed than before).

Try adding this to the CSS code:

.addtnew {
  transition-duration: 2s;
}