Utilizing a webkit transition to conceal a div element by setting its display property to "none"

I'm currently working with code that looks something like this:

 <style>
     #submenu {
      background-color: #eee;
      height:200px;
  width:400px;
  opacity: 1;
      -webkit-transition: all 1s ease-in-out;
     }
    .doSomething {
      background-color: #fc3;
  -webkit-transform: rotate(360deg);
  visibility:collapse;
     } 
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js" type="text/javascript"></script>
</head>


<body>
   <div id="submenu">`enter code here`
      <div style="background-color:black;width:50;height:50"></div>
   </div>
   <div style="background-color:yellow;height:250"></div>
   <script type="text/javascript">
    $(function(){
        $('#submenu').addClass('doSomething');
    });
</script>
</body>

The challenge I'm facing is once the first div finishes its animation, I want it to hide and have the div below it (the yellow one) take its place. I attempted to add the property display:none, but the animation won't function as expected.

Any assistance would be greatly appreciated.

Answer №1

If your code is tailored for webkit, consider utilizing the webkitTransitionEnd event to detect when the animation concludes. Within the event handler, you can conceal the initial div and reveal the subsequent one. I've created a brief jsFiddle showcasing this implementation.

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

Alternate. (individually)

Issue with Running Program I've been struggling to get my program to run correctly. The task at hand is to have the program display only one question at a time. But no matter what I try, clicking on all questions displays all the answers simultaneous ...

Utilizing JavaScript to dynamically set the height and width of a canvas based on the user input

How can I take user input for height and width values and apply them to a newly created canvas? I am able to retrieve the values, but I'm unsure how to set them as the style.height and style.width properties. var createNewCanvas = document.getEleme ...

``How can I lock the top row of an HTML table containing input fields in place while

Below is the table structure: <table> <tr> <th>row1</th> <th><input type="text"></th> <th><input type="text"></th> <th><input type="text"></th& ...

Using two modal popups while passing an identifier

UPDATE: In my investigation, I discovered that a plain input tag without MVC RAZOR works as expected: <input type="text" class="hiddenid2" /> //WORKED However, when using the following code, it does not work: @Html.Editor("id", "", new { htmlAtt ...

Utilizing grid for JavaScript positioning on the website:

Hey there! I have a bunch of javascript files that I want to incorporate into my site using CSS grid. I have the code ready, but I'm a bit confused: Where exactly should I add the columns and rows in the .box-1 class to change its position? Addition ...

Avoiding the appearance of a scrollbar when content extends beyond its containing block

I am struggling with writing markup and CSS to prevent a background image from creating a scrollbar unless the viewport is narrower than the inner content wrapper: The solution provided in this post didn't work for me: Absolutely positioned div on ri ...

jQuery counter no longer updates when scrolling

I'm having trouble with my jQuery counting function when using the scroll feature on a specific div ID. The numbers freeze if I keep scrolling before they finish updating on the screen. Whenever I scroll to the defined div ID, the counting function k ...

The interaction of flex-box in the presence of absolute positioning

Hey everyone, I need some help understanding why the flexbox is behaving oddly in this code snippet. 1. <!DOCTYPE html> <html> <head> <style> body{ position: relative; } .container { ...

What causes the unset width or height to impact object-fit, and is there a workaround for this issue?

Query Beginnings Encountering unexpected behavior while using the value unset with the rule object-fit led me to question if there might be a rationale or workaround for this peculiar issue. Demonstration .block { &__img { width: 100%; hei ...

Assistance needed for adjusting margins and padding within the inner content box

I'm currently in the process of designing a new website layout using CSS, but I've encountered some challenges along the way. My main goal is to ensure that all elements stay within the boundaries of the browser window, with the scroll bar appear ...

Hide the popup by clicking anywhere outside of it

I need help with a code that involves a button triggering a popup, and I want the user to be able to close the popup by clicking outside of it when it's open. My goal is to assign the method "Close()" to the event listener that detects clicks outside ...

Tips for centering a div horizontally when it exceeds the width of a mobile screen

My challenge is to create a circular div element that is wider than the mobile screen and perfectly centered. This circular div needs to be an exact circle, specifically targeted for mobile screens. I've attempted to achieve this using the code in th ...

Show the bottom left quarter of the image in an HTML display

Currently, I am still new to HTML coding and experimenting with displaying specific sections of an image. The current code I have is this: <img id="theImg" style="width:100%;" src="https://'myimage.jpg'" /> I'm struggling to figure o ...

Steps for styling an AngularJS Popup:1. Determine the desired appearance for

I have some code that displays a popup when clicked, along with its automatically generated CSS. I want to be able to make changes to the CSS by adding IDs or classes to it. How can I assign IDs or classes to this element so that I can easily target them f ...

Problem with incorporating responsive gifs

I'm new to CSS and I'm trying to incorporate an animated GIF as a smartphone screen using Bootstrap to ensure responsiveness. I've managed to get it working for larger and medium screens, but the issue arises when resizing for smaller displa ...

Two neighboring sections containing dynamic elements. One section automatically adjusts its size to fit the content, while the other allows

I need to display 2 adjacent boxes with dynamic content rendered using Angular. The Container should have the same height as Box1. The height of Box2 may vary due to its dynamic nature, but it should never be taller than Box1. If it does become higher, a s ...

Methods for dynamically populating dropdown lists with JavaScript and Bootstrap

I have collected all 387 regions for the current date and now I want to dynamically populate a bootstrap dropdown with these regions using JavaScript. Below is the basic HTML code for a bootstrap dropdown: <div class="dropdown"> <button class ...

Issue with the alignment of DIV container due to spacing issues

In the screenshot below, there is a DIV container with padding of 15px on the left and right. However, the contents are appearing spaced out downwards for some reason... Other than the left & right padding, no other styling seems to be affecting it. Adjus ...

Divide a single image into several smaller images and enable clickable links on each separate image, similar to an interactive image map

Challenge: I am faced with the task of splitting a large image (1920px x 1080px) into smaller 40px by 40px images to be displayed on a webpage. These smaller images should come together seamlessly to recreate the original full-size image, with 48 images a ...

Why are my styles not working when referenced from the .module.scss file?

Here is the code snippet from my Sublayout.module.scss file: .pl-6 { padding-left: 6rem !important; } .pr-6 { padding-right: 6rem !important; } .pl-12 { padding-left: 12rem !important; } .pr-12 { padding-right: 12rem !important; } After im ...