Home » vue » Can you add a fade out transition to an element that is having an inline style 'display: none' applied?

Can you add a fade out transition to an element that is having an inline style 'display: none' applied?

Posted by: admin November 26, 2021 Leave a comment

Questions:

I’m looking to add a fade out transition to a legacy Klaviyo sign up form pop up. The wrapper element has an inline style set to ‘display: none’ which is removed if the user is a new visiter and doesn’t have the Klaviyo cookie so the form is displayed. On close ‘display: none’ is added back to the element and a cookie is added.

Is there a way to fade this element out? Because ‘display: none’ happens instantly I’m guessing there’s no way of achieving this? I’m also using Vue, but couldn’t find away of using Vue transitions to achieve this either.

Any help would be greatly received.

<div class="klaviyo_modal" id="k_id_modal" style="display:none;">
   <div class="klaviyo_inner">
   <a href="#" class="klaviyo_close_modal klaviyo_header_close">×</a>
   <form action="//manage.kmail-lists.com/subscriptions/subscribe" method="POST" novalidate="novalidate" class="klaviyo_subscription_form">
      <input type="hidden" name="g" value="LIST_ID">
      <div class="klaviyo_fieldset">
        <p class="klaviyo_header">Interested in our Newsletter?</p>
        <p class="klaviyo_subheader">Stay in the know with news and promotions.</p>
      </div>
      <div class="klaviyo_fieldset">
      <div class="klaviyo_field_group">
        <label for="k_id_modal_$email">Email Address</label>
        <input type="email" id="k_id_modal_$email" name="email"></div>
      </div> 
      <div class="klaviyo_fine_print"></div>
      <div class="klaviyo_form_actions">
          <button type="submit" class="klaviyo_submit_button">
          <span>Subscribe</span>
          </button>
      </div>
      <div class="klaviyo_below_submit" ></div>
   </form>
   <div class="error_message" ></div>
   <div class="success_message" ></div>
   </div>
</div>
<script type="text/javascript" src="//www.klaviyo.com/media/js/public/klaviyo_subscribe.js"></script>
<script>
   KlaviyoSubscribe.attachToModalForm('#k_id_modal');
</script>
Answers:

Unfortunately not. It’s inconvenient, but display: none removes the element from the rendered DOM layout entirely, and so it would be impossible to fade it out. The element stops even taking up space when it’s not displayed.

visibility: hidden is closer, but still no cigar since you can’t fade between visible and hidden – it’s just a binary situation.

The workaround is to use opacity: 0 and transition or keyframe the opacity.