Is there a way to add animation to the display: none/block property for flex items?

Is there a way to animate the display property from block to none and vice versa?

I want to create an animation where clicking on div1 animates div 2, and clicking on div4 animates div 3. I would like these animations to include smooth transitions while keeping them within a flex container.

So far, I have been able to animate visibility and opacity, but when using display none, divs 2 and 3 still take up space within the container. Alternatively, switching between display block and none loses the transition effect.

I attempted positioning the inner divs absolutely, but this caused responsiveness issues.

Check out my CodePen for reference: http://codepen.io/adamTrz/pen/jWOJMj

jqueryhtmlcssanimationflexbox

Answer №1

To achieve this effect, it is recommended to utilize javascript or jQuery instead of simply toggling between display:none. It is suggested to animate the height (and possibly the width) of the elements to 0 before setting them to display:none.

You may find the following page helpful: Many similar solutions have been discussed in the comments section.

A CSS-only solution that closely aligns with your requirements can be found in one of the comments:

CSS

div {
    overflow:hidden;
    background:#000;
    color:#fff;
    height:0;
    padding: 0 18px;
    width:100px;
    -webkit-transition: all .5s ease;
    -moz-transition: all .5s ease;
    transition: all .5s ease;
}
.animated {
    height:auto;
    padding: 24px 18px;
}

Check out the live demonstration here: http://jsfiddle.net/catharsis/n5XfG/17/

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

Refreshing the webpage is necessary in order to display any updates, even after using the window.location.reload(true) function

Is there a way to update taxonomy term via AJAX that will reflect changes without the need for reloading the page? The current method works well, but the content does not refresh after using window.location.reload(true). Take a look at the code snippet and ...

javascriptphpjqueryajaxwordpress

What is the best way to include multiple tags (specifically for articles) in the Facebook Open Graph?

When it comes to a single blog or article with multiple tags, how can you add Facebook Open Graph data? This method seems like the most logical way to do it. However, the Facebook debugger reports that it's incorrect: <meta property = "article: ...

htmlfacebook-opengraphrdfa

The issue with adding rows to a dynamic HTML Table in Angular is that it is causing the previous rows to disappear

I have created a neat HTML table with three columns: <table > <thead> <tr> <td class="tdBorderEmail"><label>Action</label></td> <td class="tdBorderEmai ...

javascripthtmlangulartypescriptdatatables

Is it feasible to utilize a prop for styling in Vue using SCSS/SASS?

I am currently working on enabling custom theming for my component that utilizes bootstrap. I am aiming to define its $primary tag in SCSS within the section of the Vue component. Currently, my styling setup looks like this: <style scoped lang="scss"& ...

javascriptcssvue.jssassbootstrap-4

Manipulating flexslider through hovering

I've been trying to implement a hover-controlled slider for a project I'm working on. Despite researching various posts, I haven't been able to find a complete solution yet. I'm no jQuery pro, but I've tried my best. However, I&apo ...

jqueryflexslider

Utilize the atan2() function to rotate a div so that it follows the movement of the mouse

I am trying to create an effect where the mouse aligns with the top of a div and the div rotates as the mouse moves. The rotation should happen when the top part of the div is in line with the mouse cursor. My goal is to achieve this using the atan2 functi ...

javascriptjqueryhtmlcssmath

The method for retrieving the text from a dropdown menu after making a selection

I have multiple dropdown menus and I want to change the title of each dropdown to the selected text when hovering over it, as well as display an alert message with the title. How can I achieve this? <div> <select c ...

jqueryjquery-ui

Tips for synchronizing the height of a scrollable list-group column with a neighboring column

Within my Bootstrap 4 layout, I have a column on the left that includes a dynamically generated .list-group, which could potentially contain numerous .list-group-items. On the right side, there is another column showcasing multiple cards inside a .row. Th ...

cssbootstrap-4

What is the best way to fadeTo() all elements excluding one specific div?

For my tutorial, I am looking to create a fading effect for all divs on the page except for a specific one that I want users to focus on. How can I achieve this using fadeTo? Currently, I have the code set to fade the entire body of the page. Is there a w ...

jqueryfadeto

What is the best way to divide widgets in a Wordpress Sidebar?

I am looking to customize the spacing between widgets in my Wordpress sidebar, similar to what is shown on this example site. Currently, my sidebar does not have the desired spacing. I have tried various CSS codes found online, but none of them seem to be ...

htmlcsswordpresssidebar

Having trouble with loading multiple AJAX requests in Internet Explorer?

I've been troubleshooting this code for a while now, and it's working fine in Firefox, Chrome, and Safari. However, there seems to be an issue with Internet Explorer as the page only loads once. I've attempted to utilize both the time functi ...

javascriptjqueryajaxinternet-explorer-9

Adjust the height of the p element depending on its inner content

I have a notification panel where I display the latest notifications. The content of these notifications can vary in length, from short messages to longer ones. Short messages are displayed correctly, but longer ones are not appearing as intended. Here is ...

javascriptjqueryhtmlcss

Ways to place text over an image

Currently in the process of learning how to use CSS with HTML, I am experimenting with overlapping an image with text. Here is my current code: <style> .aboutus_oven{ background:url('Images/oventemp.jpg') no-repeat center; backgr ...

htmlcssimagetextoverlap

Angular ng-repeat app not functioning as intended due to a lack of complexity

Seems like I've stumbled upon a rather silly issue here and it might be a duplicate question, but I'm still scratching my head over it. I have this incredibly basic Angular app along with some HTML. While debugging in Chrome, I can clearly see ...

javascripthtmlangularjsajax

Employing CSS animations to elevate div elements

Currently, I am working on animating a table of divs and trying to achieve an effect where a new div enters and "bumps up" the existing ones. In my current setup, Message i3 is overlapping Message 2 instead of bumping it up. How can I make Messages 1 and 2 ...

javascriptjqueryhtmlcsscss-animations

Is there a way to incorporate the function slide(-1) into a jQuery onclick event?

I am currently working on creating an image slider using jQuery. This is my first time developing one in JavaScript, and I now want to convert the code into jQuery. My question is, how can I achieve the functionality of onclick="slide(-1)" in jQuery? Her ...

jquery

What is the technique of passing objects using jQuery's ajax function?

I'm trying to send an object to a controller action, but it's not working. The object is null with no errors. I've debugged it and confirmed that the parameters are being passed correctly. scripts $(document).ready(function () { var Irregu ...

jqueryajaxasp.net-mvc

Ways to maintain DIV visibility following a post back

Within this hidden div, there lies an asp.net button. When the div is slid down and the button is clicked, the div slides back up. I am seeking a way to keep the div visible after clicking on the asp.net button. Any suggestions? ...

jqueryasp.nethtmlpostback

Running a JavaScript animation within an Electron environment

My curiosity lies in developing man-machine interfaces using Electron. Currently, I am experimenting with a Star Trek life signs monitor demo. I came across this code that can be easily customized to create vertical and horizontal movements: http://jsfiddl ...

javascriptjqueryjsonanimationelectron

Using PHP code to properly display formatted XML content within a `pre` HTML tag

Can anyone help me with formatting the XML syntax that is shown in a pre tag on my sandbox website? If you have any solutions, please share them with me. ...

phphtmlsyntax-highlightingpre