Is it possible to smoothly switch between two states using just a single animation class?

I am trying to trigger an animation with a single class, and then have that animation play in reverse when the class is removed.

To better explain, I have created a CodePen example of my current progress.

In the CodePen, you can see that when the class .zoom is removed from the element #box, it simply disappears. Instead, I want the animation to play in reverse when the class is removed.

Is there a way to smoothly transition between the animation playing forward and in reverse using just one animation class? Typically, I would use transitions, but they don't work with transforms.

javascriptjqueryhtmlcss

Answer №1

Consider incorporating the .zoomout class, css animations, and utilizing .removeClass() along with a second class at .toggleClass()

window.onclick = function() {
  if (!$("#box").is(".zoom")) {
    $("#box").removeClass("zoomout")
      .toggleClass("zoom");
  } else {
    $("#box").toggleClass("zoom zoomout");
  }
};
#box {
  width: 256px;
  height: 256px;
  background: black;
  opacity: 0;
  display: block;
  transform: scale(1.15, 1.15);
  margin: 16px 0px;
}
.zoom {
  animation: zoom 500ms;
  animation-fill-mode: both;
  -moz-animation: zoom 500ms;
  -moz-animation-fill-mode: both;
  -webkit-animation: zoom 500ms;
  -webkit-animation-fill-mode: both;
}
.zoomout {
  animation: zoomout 500ms;
  animation-fill-mode: both;
  -moz-animation: zoomout 500ms;
  -moz-animation-fill-mode: both;
  -webkit-animation: zoomout 500ms;
  -webkit-animation-fill-mode: both;
}
@keyframes zoom {
  0% {
    opacity: 0;
    transform: scale(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-moz-keyframes zoom {
  0% {
    opacity: 0;
    transform: scale(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@-webkit-keyframes zoom {
  0% {
    opacity: 0;
    transform: scale(1.15);
  }
  100% {
    opacity: 1;
    transform: scale(1);
  }
}
@keyframes zoomout {
  0% {
    opacity: 1;
    transform: scale(1.15);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
@-moz-keyframes zoomout {
  0% {
    opacity: 1;
    transform: scale(1.15);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
@-webkit-keyframes zoomout {
  0% {
    opacity: 1;
    transform: scale(1.15);
  }
  100% {
    opacity: 0;
    transform: scale(1);
  }
}
body {
  margin: 0;
  text-align: center;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -60%);
  -moz-transform: translate(-50%, -60%);
  -webkit-transform: translate(-50%, -60%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<div id="box"></div>
Click the document to toggle the box.

codepen http://codepen.io/anon/pen/vOxxKE

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

Determine if two arrays of objects in JavaScript are equal and if so, store any new items in MongoDB

Hey there! I'm in the process of comparing two arrays of objects, each object containing an ID. One array is sourced from Stripe, while the other is retrieved from my database. The goal is to determine if the IDs match - returning true when they do an ...

javascriptarraysreactjsmongodbobject

Swapping values between HTML tables and arrays with the power of JavaScript

I have a unique table structure that I need help with: https://i.sstatic.net/fr7oJ.png My current table has 2 rows and multiple columns, but I want to change it to have 2 columns and multiple rows like this: https://i.sstatic.net/uhkp9.png To create th ...

javascripthtmlcsshtml-tabletranspose

A guide to displaying numerous notifications using notistack in a React environment

I'm currently experimenting with React's 'notistack' module to showcase multiple notifications as a stack. However, it seems like I might be making an error since every time I encounter a warning: react_devtools_backend.js:3973 Warning ...

javascriptreactjsmaterial-uinotistack

spring fails to run javascript

In my project, I am utilizing Spring MVC 3 framework. Below is the snippet of my AddressController: @Controller public class AddressController { private static Logger logger = Logger.getLogger(AddressController.class); @RequestMapping(value="/ad ...

javajavascriptspringjsp

What could be the reason for the padding not functioning properly on my Bootstrap 5.3 webpage?

What could be the reason for pe-5 not functioning properly? <head> <link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="10727f7f64636462716050253e233e22">[email protect ...

htmltwitter-bootstrapbootstrap-modalbootstrap-5padding

Icons in Semantic-UI: Facing Difficulty in Accessing ("CORS Request Not HTTP"

Here's an example I'm working on: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Understanding - Main</title> <link rel="stylesheet" type="text/css" href="../semantic/dist/semanti ...

javascriptphphtmlcorssemantic-ui

What is the process for running "node server.js" within codelab?

I am currently going through a codelab tutorial on Bitbucket at this link After installing node.js for the first time, I encountered an error when trying to run the server.js file: node server.js The error message "node: Command not found" appeared even ...

javascriptnode.jswebrtc

Could you please direct me to the section in the ECMAScript documentation that specifies the behavior of a resolved promise with its [[Promise

My objective is to compare the behavior of a promise's resolve function with the corresponding process outlined in the ECMAScript specification. Specifically, I am interested in understanding how the resolve function behaves when called with an object ...

javascriptecmascript-6

Require assistance in transitioning the ajax and php code for use within Wordpress

After following various guides, I have managed to reach this point: add_action('wp_enqueue_scripts', 'do_enqueue_scripts'); function do_enqueue_scripts() { wp_enqueue_script('Java', plugins_url( '/js/form.js', ...

phpjqueryajaxwordpress

First-character styling not applying to ID in CSS

My CSS :first-letter selector is effective on all p elements, however when applied to a span with the id #fletter, it doesn't seem to work... #fletter span:first-letter { font-weight: 600; font-size: 25px; } <span id="fletter"> The : ...

htmlcsscss-selectorspseudo-element

When using React.js Material UI's CardActionArea with a flex display, the children elements may not automatically use the full width as expected

Getting straight to the point - I recently experimented with changing the display style property from block to flex, along with setting flexDirection: 'column' for the CardActionArea component. The main goal was to ensure that CardContent maintai ...

javascriptreactjsmaterial-ui

In React Native, what is the method for utilizing index.js rather than separate index.ios.js and index.android.js files to create a cross-platform app?

Thank you for the help so far, I am new to React Native, and I'm trying to develop a cross-platform app. Here is my index.js file: import React from 'react'; { Component, View, Text, } from 'react-nativ ...

javascriptandroidiosreact-nativecross-platform

Symfony using Vite with Vue 3 encounters an error: Uncaught ReferenceError - exports is undefined

Currently, I am in the process of developing a Symfony 3 Application with Vite and Vue3 integrated with TypeScript. To replace Symfony's Webpack Encore, I opted for the Vite Buildtool using this convenient plugin: https://github.com/lhapaipai/vite-bu ...

javascripttypescriptvue.jssymfonyvite

Adding an Icon to a Tab in Ant Design - A Step-by-Step Guide

Is there a way to include an icon before the title of each open tab? I am currently using the antd library for tab creation, which doesn't provide a direct option for adding icons. Here is my code snippet along with a link to the jsfiddle https://jsfi ...

javascriptcssreactjsantd

Default page featuring an AngularJS modal dialog displayed

I am attempting to display a modal popup dialog using an HTML template. However, instead of appearing as a popup dialog, the HTML code is being inserted into the default HTML page. I have included the controller used below. app.controller('sortFiles&a ...

javascriptangularjs

Creating auto serial numbers in the MERN stackWould you like to know how to

I need help coming up with a way to automatically generate serial numbers for my "ticketno" field. Every time a user creates a new application ticket, the ticket number should increment by one. Can someone guide me on how to achieve this? This i ...

javascriptnode.jsreactjsmongodbexpress

Add the value of JQuery to an input field rather than a select option

Is there a way to append a value to an input field using JQuery, instead of appending it to a select option? Select option: <select name="c_email" class="form-control" ></select> JQuery value append: $('select[name=&q ...

htmljquery

JavaScript does not recognize the $ symbol

Firebug is indicating that there is an issue with the $ variable not being defined. I have a basic index.php page that uses a php include to bring in the necessary content. The specific content causing the error is shown below: <script type="text/jav ...

phpjavascriptfirebug

Decoding a formatted string

Here is a string that needs parsing: const str = 'map("a")to("b");map("foo")to("bar");map("alpha")to("beta");' The goal is to generate a JSON structure like this: [{id: 'a', map: 'b'}, {id: 'foo', map: 'bar&a ...

javascriptjsonregexstringparsing

Can you explain the variance between the two state updates in React?

Currently enrolled in a React course where the instructor is diving into state updates. I'm struggling to grasp the internal differences between these two code snippets, provided below for reference: Snippet that updates state directly class Counter ...

javascriptreactjs