CSS Animation: Smoothly transition out of a class

When this code is executed, the modal is displayed with a smooth transition using CSS3. Upon clicking on "Close Modal," the class ".is-active" is removed instantly. Instead, I would like to achieve the reverse effect where the class is removed gradually.

Currently, when the modal opens, it slides in from left to right. I want it to slide back out from right to left when closing it, returning to its original center position.

Any suggestions on how I can achieve this desired effect?

$('.section-modal .profile, .section-modal .overlay .modal .title').click(function(){
  $('.overlay').toggleClass('is-active');
});
.section-modal {
width: 700px;
height: 700px;
margin: 0 auto;
  position: relative;
  overflow: hidden;
}
.section-modal .profile {
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  background: rgba(0, 0, 0, 0.1);
  background: white;
  padding: 15px 30px;
  border-radius: 4px;
  box-shadow: 0px 23px 30px -20px rgba(0, 0, 0, 0.4);
  -webkit-transition: all 200ms ease-in-out;
  transition: all 200ms ease-in-out;
}
Etc...
etc... (Continued snippet of code)
Etc... etc... (Continued snippet of code)

jquerycssanimation

Answer №1

To achieve the desired delay for the output effect, you can utilize the css property transition-delay.

I have implemented a CSS animation for the entry effect (modalAnimIn) as well as the output effect (modalAnimOut). A slight modification was required in the JavaScript code to trigger modalAnimOut on output by changing the class instead of removing it.

Note: No specific animation is needed for the overlay. Using a simpler transition will suffice.

  $('.section-modal .profile, .section-modal .overlay .modal .title').click(function(){
    $('.overlay').toggleClass('inactive is-active');
  });
  .section-modal {
  width: 700px;
  height: 700px;
  margin: 0 auto;
    position: relative;
    overflow: hidden;
  }
  ...
  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="section-modal">
  <div class="profile"><img src="http://www.fillmurray.com/130/130"/>
    <div class="text">
      <div class="name">Bill Murray</div>
      <div class="meta">Click me!</div>
    </div>
  </div>
  <div class="overlay inactive">
    <div class="modal">
      <div class="title">CLOSE MODAL</div>
      <div class="body">
        ...
      </div>
    </div>
  </div>
</section>

Answer №2

One possible method to achieve this is as follows:

$('.section-modal .profile, .section-modal .overlay .modal .title').click(function() {
var $overlay = $('.overlay');

if ($overlay.hasClass('is-active')) {
$overlay.addClass('hidden').on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function(){
$overlay.removeClass('is-active hidden');
})
} else {
$overlay.addClass('is-active').removeClass('hidden');
}
});
.section-modal {
width: 700px;
height: 700px;
margin: 0 auto;
position: relative;
overflow: hidden;
}
.section-modal .profile {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
background: rgba(0, 0, 0, 0.1);
background: white;
padding: 15px 30px;
border-radius: 4px;
box-shadow: 0px 23px 30px -20px rgba(0, 0, 0, 0.4);
-webkit-transition: all 200ms ease-in-out;
transition: all 200ms ease-in-out;
}
.section-modal .profile .name {
font-size: 24px;
margin-bottom: 8px;
}
.section-modal .profile .meta {
color: rgba(0, 0, 0, 0.4);
}
.section-modal .profile img {
width: 80px;
height: 80px;
border-radius: 50%;
margin-right: 20px;
}
.section-modal .overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
display: none;
}
<section class="section-modal">
  <div class="profile"><img src="http://www.fillmurray.com/130/130"/>
    <div class="text">
      <div class="name">Bill Murray</div>
      <div class="meta">Click me!</div>
    </div>
  </div>
  <div class="overlay">
    <div class="modal">
      <div class="title">CLOSE MODAL</div>
      <div class="body">
        <div style="background-image: url(http://www.fillmurray.com/180/180)" class="img"></div>
        <div class="text"> 
          <p>Bill Murray loves you, and sends his most sincere regards.</p>
          <p>He also asks that you simply keep on hacking.</p>
        </div>
      </div>
    </div>
  </div>
</section>

The key modification is implemented here by applying a reverse animation when the active class becomes hidden:

.section-modal .overlay.is-active.hidden {
    -webkit-animation: overlayAnim 2s ease-in-out reverse;
    animation: overlayAnim 2s ease-in-out reverse;
}
.section-modal .overlay.is-active.hidden .modal {
    -webkit-animation: modalAnim 2s ease-in-out reverse;
    animation: modalAnim 2s ease-in-out reverse;
}

Additionally, I have incorporated a check for an active class, instantly adding a hidden class if true, and waiting for the animation to complete before removing both:

if ($overlay.hasClass('is-active')) {
    $overlay.addClass('hidden').on('animationend webkitAnimationEnd oAnimationEnd MSAnimationEnd', function(){
        $overlay.removeClass('is-active hidden');
    })
} else {
    $overlay.addClass('is-active');
}

This approach should effectively fulfill the intended functionality.

Answer №3

Ensure to include the "easing" string parameter when calling the toggleClass function, using either the value "linear" or "swing".

$('.overlay').toggleClass('is-active',,"swing");

For more information, visit the jQuery toggleClass documentation.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Pause animation when hovering over their current positions

I am working on a project with two separate divs, each containing a circle and a smiley face. The innercircle1 div is currently rotating with a predefined animation. My goal is to create an effect where hovering over the innercircle1 div will pause its rot ...

javascripthtmlcss

Creating an element in react-draggable with two sides bound and two sides open - here's how!

At the moment, I am facing an issue where the element is restricted from moving outside of the container with the class of card-width-height. My goal is to have the right and bottom sides bounded within the container while allowing the element to move beyo ...

javascriptcssreactjsecmascript-6jsx

Create spacing on the right side of a div with Bootstrap 4 offset, instead of the typical left side offset

Looking for a solution in Bootstrap 4 that mirrors the offset feature in Bootstrap 3, but pushes a div to the left instead of right. Need a way to have multiple dynamic divs within a row, where one div is pushed to the left on its own row without the nee ...

htmlcssbootstrap-4

Align images of varying sizes vertically within div containers, even when the image is larger than the div itself

I'm facing a challenge when it comes to aligning images vertically inside divs. The problem arises due to the following conditions: The images will have varying and unknown sizes. These images are larger than the divs they are contained in, requiri ...

javascriptjquerycssvertical-alignment

Ways to recognize when a button has been pressed

I developed my website using the CodeIgniter framework. Here is my personal website On the homepage, if I click on the "landscape" picture (top right) or the "landscape" button in the menu, it takes me to the "landscape" page. However, when I return to t ...

phpjqueryhtmlcsscodeigniter

How to use jQuery to locate a numerical value within a string

Here is my input: var str = 'Cost USD 400.00'; I am trying to figure out how to use jQuery to extract only the number from this string. Can anyone help me with that? ...

jqueryregex

When scrolling, dynamically change the background color by adding a class

I am looking to achieve a scroll effect where the color of the menu buttons changes. Perhaps by adding a class when scrolling and hitting the element? Each menu button and corresponding div has a unique ID. Can anyone suggest what JavaScript code I should ...

javascripthtmlcss

Leveraging JQuery for form submission

My webpage contains a form with the following structure: <form action="/" method="post"> <select id="SelectedMonth" name="SelectedMonth"> <option>7/1/2017</option> <option>6/1/2017</option> </select> </form> ...

javascriptjqueryasp.net-mvcforms

Repositioning SVG rectangles made with d3.js (Using d3 or jQuery for this task)

Situation: I'm currently working on integrating a Google map with a d3 overlay, inspired by Mike Bostock's example found here: http://bl.ocks.org/mbostock/899711 This project is being developed within a Rails 4 application, utilizing d3.js and ...

jquerysvgd3.jsevent-handlingmouseover

Obtaining data with jQuery.Ajax technology

I am attempting to retrieve real-time data from a different URL and display it in a text field every second without refreshing the entire page. The content of the URL is constantly changing, so I want the field to update accordingly. However, despite my ef ...

javascriptjqueryhtmlajax

How to Calculate the Time Interval Between Two CORS Requests Using jQuery AJAX

When using jQuery's $.ajax to make a CORS request to a web service, there is typically a pre-flight request followed by the actual POST request. I have observed that when there is a time gap between making two web service calls, both a pre-flight and ...

javascriptjqueryajaxgoogle-chromehttp

Problem with sending a form using Ajax

I've set up a page that dynamically generates a list of items. Each item in the list includes a button to submit a form with data specific to that item (the sorting is working correctly). The form submission is handled by the following jQuery code: & ...

phpjqueryhtml

Learn how to utilize ng-class to assign an ID selector to HTML elements

In my code, I have an icon that is displayed conditionally using ng-class. I am looking to include ID's for both the HTML elements. <i ng-show="ctrl.data.length > 1" ng-class="{'glyphicon glyphicon-chevron-down': !ctrl.isOpen, ...

htmlcssangularjsangularjs-ng-class

Utilizing the Grid-A-Licious plugin multiple times within a single webpage

Currently, I am utilizing the Grid-A-Licious plugin for my project. It functions perfectly when used on a single page with one call to the plugin. However, due to my design requirements, I need to implement it within 3 tabs on the same page. Unfortunately, ...

jqueryhtmlcsstwitter-bootstraptabs

Detecting whether a browser is capable of supporting dark mode

One method to determine if dark mode is active is by using prefers-color-scheme: dark: const isDarkMode = window.matchMedia('(prefers-color-scheme: dark)').matches; Is there a way to detect if a browser supports dark mode as well? (By "supports ...

javascriptcssbrowserdarkmode

The form continues to submit even if the validation process fails

I am facing an issue where my form still submits to the controller even if the validation fails. Here's my jQuery code: $(document).ready(function () { $('#commentForm').validate(); }); $(function () { $('#commentForm&ap ...

jqueryhtml

Image in the background not showing up on Chrome or Internet Explorer

The issue I'm facing is that the background-image displays correctly in Firefox, but not in Chrome or IE. Despite trying various solutions found on Stackoverflow, such as disabling my ad-blocker, placing the code in the head of the file: <head> ...

cssasp.netgoogle-chromeinternet-explorerfirefox

Having difficulty displaying this code accurately on Google Chrome

I managed to create a hover effect over a series of images that displays additional information when hovered over. Below is the code I used: HTML <ul class="photo-grid"> <li> <a href="https://www.abglobal.com/" target="_blank"& ...

htmlcssgoogle-chromemousehover

The process of making an image fill an entire div using Html and CSS

What is the best way to make an image fill an entire div using Html and CSS? ...

htmlcssmobile-website

The search results in ajax live search are present, but unfortunately they are not displaying on

I am currently working on a code for an ajax live search feature and need some help with getting results to display $(document).ready(function() { $("#search").keyup(function() { var query = $(this).val(); if (query != "" && query.leng ...

htmljqueryajaxsearchlive