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

Triggering a jQuery ajax request upon pressing a key on the keyboard

When a user inputs text into an <input> element, I'm using ajax to send a request to the server. Here's how it looks: $('#my-input').bind("input", function(event){ // ajax request code }); My concern is that too many requests ...

javascriptjqueryajax

Does the placeholder feature work on Internet Explorer 8?

My understanding is that IE 8 doesn't support placeholder attributes. However, I recently noticed that when I visit www.skydrive.com, it displays a placeholder text for email and password input fields. The text is shown as "[email protected] & ...

jqueryinternet-explorerinternet-explorer-8hamlonedrive

ADVENTURE BLOCKED - Intercept error: net::ERR_BLOCKED_BY_CLIENT

I've encountered an issue where my initialize function doesn't run properly when a user has an ad blocker enabled. It seems that the ads-script.js file is being blocked by the client with a net::ERR_BLOCKED_BY_CLIENT error, leading to my .done ca ...

javascriptjqueryadblock

Steps to create an automatic submission feature using a combobox in HTML5 and then sending the retrieved data back to the HTML file

Here is the code snippet I've been working on: <strong>Station Name</strong> <!--This portion includes a combobox using HTML5 --> <input type=text list=Stations> <datalist id=Stations> <option>Station1</opt ...

phpjavascriptjqueryhtmlcombobox

How can I delete a CSS class from an element?

Is there a way to remove the "ui-widget-content" class from the code below? It appears in multiple places throughout my code. Here is an example snippet: <pre> <form id="clientForm"> <div id="clientData"> <div id="gbox_grid_1" class=" ...

cssjquery-ui

Harness the power of JavaScript to generate a dynamic overlay with a see-through image that can be expanded

Within different sections of my website, we display banner ads that are loaded in real-time from third-party sources and come in various sizes. I'm interested in adding a transparent overlay image to each ad which would allow me to trigger a click ev ...

javascriptjquerycss

Looking for assistance with aligning a form in the center?

After spending the last hour trying to center a form for a name without success, I have decided to seek help here. Although I have searched extensively, I am still struggling at this point. Here is my HTML: <div id="main" class="main"> <tabl ...

htmlcssformsinputalignment

Can object-fit be preserved while applying a CSS transform?

Currently, I am developing a component that involves transitioning an image from a specific starting position and scale to an end position and scale in order to fill the screen. This transition is achieved through a CSS transform animation on translate and ...

javascriptcsscss-animationscss-transforms

Proper Method for Constructing Forms

While developing a signup form, I've noticed that I often turn to using tables for proper alignment, similar to the approach used on the MySpace signup page where colspan is utilized to evenly space out elements. Is this method going against conventio ...

htmlcssformscss-tables

Retrieve the JSON data corresponding to the file that was uploaded

While working on a modified version of the Jquery File Upload Plugin from Hayageek, I encountered an issue. The original code worked perfectly, but when I made modifications to insert the uploaded filename into a database, the JSON response did not include ...

phpjqueryjson

Navigate to the line situated at the exact midpoint vertically

I have a div with child elements, each containing a line of text. <div id="aboutxt"> <div class="line">TEXT_LINE_ONE</div> <div class="line">TEXT_LINE_TWO</div> <div class="line">TEXT_LINE_THREE</div> ...

jquerycss

Issues with Codeigniter Ajax Post functionality

Hey everyone, I'm working on implementing a simple voting system for comments using jQuery Ajax to avoid page refreshing when someone likes or dislikes a comment. Here is the jQuery code I have so far: $(document).ready(function(){ $(".vote-btn" ...

phpjqueryajaxcodeigniterpost

Tips on adjusting a position that shifts with changes in window size

Working on a website for my grandpa, I'm planning to include a small biker character that runs across the screen. When hovered over, he stops and advises "wear a helmet." The animation works well, but there's an issue with the positioning when th ...

javascripthtmlcssanimation

Correct placement of elements using absolute positioning and optimized scroll functionality

I am currently working on implementing tooltips for items within a scrollable list. My goals for the tooltips are as follows: Ensure they are visible outside and not restricted by the scroll area Appear immediately after the corresponding item Be detach ...

htmlcss

Sending multiple parameters from jQuery to a controller can be achieved by defining an object with

I am facing a challenge in sending two parameters from jQuery to controllers. The issue is that jQuery is only able to send the first parameter. JQuery : save: function () { var id = $("#in_id").val(); var name = $("[name='name&a ...

jquery

Find a solution for displaying custom product badges

Having some issues with a custom product badge on my website. I tried adding a new badge (besides "Sale"), but it seems to be displaying in the wrong position. The badge should display as "Choice" on the featured products, so I added this code to the chil ...

phphtmlcsswordpresswoocommerce

Using CSS, center a div element both vertically and horizontally, and position the footer at the bottom of the page

I am encountering some unexpected behavior for a task that I thought would be simple. I have two main objectives in mind. Firstly, I want the footer to be displayed at the bottom of the page as an actual footer. Secondly, I need the div with the ".center-d ...

javascripthtmlcss

Switching out one block of HTML with another in JavaScript is a powerful way to dynamically update

I am working on creating a feature on a webpage where clicking a button will change the HTML code inside a specific div. Essentially, I want to be able to update the content of a div by simply clicking a link. Here are two different sets of HTML code: Co ...

javascripthtmlcss

Tips for adding a red dot at the top-right corner of a necessary HTML input label, similar to an asterisk

Is there a way to replace the asterisk with a dot in an HTML label for a required input? The dot should be positioned in the top-right corner similar to where the asterisk would typically be. ...

htmlcss

A guide on traversing a HTML table and cycling through its contents with JavaScript

I'm currently in the process of constructing a grid with 20 rows and 20 columns of squares, but I am encountering difficulties with looping through table values to effectively create the grid. For more detailed information on the html code, please se ...

javascripthtmlcss