What is the best way to make a flex box smoothly appear on the

Is there a way to make a flex box hidden until it fades in without losing its flexibility? I used to use 'display: 0;' and then apply jQuery .fadeIn(). However, setting display to 0 causes the flex properties of the box to disappear when fading in. If I use jQuery to set display to flex, the box just appears without any fade animation.

HTML

<div class="" id="popupContainer">
    <div class="flex-item-popup" id="popup">
        <div class="close"><i class="fa fa-2x fa-times-circle"></i></div>
        <h2></h2>
        <div class='text'></div>
        <div class="videos"></div>
        <div class="flex-container images"></div>
    </div>
</div>

CSS

#popupContainer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display:flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: center;
    z-index: 15;
}

jQuery

$(document).ready(function() {
    //???
});
jquerycssflexbox

Answer №1

If you're looking for a unique solution, you can try this unconventional method: adjust the CSS to display: none. Then, utilize jQuery to toggle the display property to flex, hide it again, and then apply fadeIn():

CSS: 

#popupContainer {
    /* ... */

    display:none;
    flex-direction: row;
    flex-wrap: wrap;

    /* ... */
}

JS: 

$("#popupContainer")
    .css("display", "flex")
    .hide()
    .fadeIn();

This technique leverages the behavior of fadeIn() to revert the item's visibility back to its original non-hidden state by using the flex setting along with toggling visibility.

Check out this code snippet on JSFiddle for demonstration.

$("#popupContainer")
    .css("display", "flex")
    .hide()
    .fadeIn(2000);
#popupContainer {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display:none;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-content: flex-start;
    align-items: center;
    z-index: 15;
    background-color: red;
}
#popupContainer *{
    border: 1px solid blue;
background-color: white;    
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="" id="popupContainer">
<div class="flex-item-popup" id="popup">
    <div class="close"><i class="fa fa-2x fa-times-circle">1</i></div>
    <h2>2</h2>
    <div class='text'>a</div>
    <div class="videos">b</div>
    <div class="flex-container images">c</div>
</div>

Answer №2

The most straightforward and tidy method (if you have the ability to edit the DOM) involves wrapping the element and fading the wrapper while incorporating a div with flex properties inside.

<div class="popup" id="popupContainer">
  <div class="popup__flexbox">
    <div class="popup__flex-item" id="popup">
    <div class="popup__close">
       <i class="fa fa-2x fa-times-circle"></i>
    </div>
    <h2></h2>
    <div class='popup__text'></div>
    <div class="popup__videos"></div>
    <div class="popup__images"></div>
  </div>
</div>

css:

.popup {
  display: none;
}

.popup__flexbox {
  display: flex;
}

js:

$("#popupContainer").fadeIn();

Answer №3

You have the option to adjust the transparency to 0 and create an animation effect:

$('#popupContainer').animate({
    opacity: 1
}, 'fast');

Answer №4

let box = $('#flex');

console.log(box.css('display'));

box.hide();

box.velocity('fadeIn', {duration: 100, display: 'flex'});

setTimeout(function(){
  console.log(box.css('display'));
 }, 100);
#flex{
  display: 'flex'
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/velocity/1.5.0/velocity.min.js"></script>

<div id="flex"></div>

Answer №5

One of the top solutions for achieving a fadeIn or jQuery show effect using just CSS to display flex is:

.fadeIn.fadeFlex[style*='display: block']{
    display: flex !important;
}
<div class="row fadeIn fadeFlex">
...
</div>

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

Building a DOM element using jQuery

I have a function $(document).ready(function () { $("#btnhighlight").click(function () { var htext = $("#txthighlighttext").val(); $("#lstCodelist option").each(function () { var sp = $(this).text(); ...

javascriptjquerydom

What is the best way to initiate a fresh AJAX request whenever the submit button is pressed?

Every time the submit button is clicked on my form, a modal appears and gets filled with JSON data from the application /addresschecker. If I receive an error message with a code return number of 2003, it indicates an issue with the addresses provided. Oth ...

javascriptjqueryajaxforms

Achieving optimal performance with scoped CSS in Vue.js

As I work on creating a new app using VueJs, I have noticed the implementation of "css scoped" as shown below: <style scoped> .example { color: red; } </style> <template> <div class="example">hi</div> </template> ...

javascriptcssvue.jsatomic

Initiate an ajax request only when there are pre-existing ajax requests in the queue

Setting up the Form I've created a form that utilizes checkboxes to determine a selected number on a page: When a checkbox is selected, it triggers a call to a controller that saves the selection and returns the updated total quantity based on its c ...

javascriptjqueryajaxasp.net-mvcfetch

Issue with Angular JS: ng-model does not update when input value is changed using jQuery

As a newcomer to AngularJS, I am currently working on creating a directive that consists of a list of input fields. The goal is for the "done" function to be triggered when the comma key (which corresponds to the number 188 in the plunker) is pressed, resu ...

jqueryangularjsangularjs-directive

Enhancing the appearance of text by applying a background color solely to its length

After conducting thorough research on the issue, I have come across various solutions that could potentially address it. However, despite my best efforts, I am unable to implement these solutions successfully. The problem at hand involves providing a colo ...

htmlcss

Combining a standard JSS class with Material-UI's class overrides using the classnames library

I am exploring the method of assigning multiple classes to an element in React by utilizing the classnames package from JedWatson, along with Material-UI's "overriding with classes" technique. For reference, you can see an instance in MUI's docu ...

javascriptcssreactjsmaterial-ui

Set the search input to occupy the full width of the container by utilizing Bootstrap's

I'm having trouble adjusting the width of my search input to 100% on screen resize (using @media (max-width: 1200px)). The issue: https://i.sstatic.net/EMr6W.jpg Here's how it should look (I can achieve this with a specific pixel width, but not ...

htmlcssformstwitter-bootstrap

Creating a button that integrates an image within a single div element

Currently, I understand the code: $('#leftDev').css("background-image", "url(img/1.png) "); will set the entire background of my leftDiv to display "1.png". However, I would like to position this image as a regular picture within the div and no ...

javascriptjqueryimage

What is the best way to align content in the middle of a containing div?

I am struggling with centering text and images inside a div that is 190px x 190px. Despite searching on various platforms, including SO and Google, I have not found a simple solution. Can someone please provide guidance on the easiest way to achieve verti ...

csshtml

Preserving content following the use of jQuery's fadeIn/fadeOut methods

I have a jQuery function that fades in and out a sprite (sprite without text) from one background to another, and it's working as intended. However, this function is also fading out the text within an element. HTML: <div id="menu"> <ul c ...

jquerycssfadeinfadeout

Incorporating a scrolling text box within an <aside> element set in a flex layout

Just trying to make sure the title is clear, as this happens to be my initial post in this space. Lately, I've been venturing back into the creation of websites and currently looking to incorporate a "concert log" below a set of GIFs on my website&apo ...

htmlcssflexboxoverflow

The max-width attribute is failing to apply to the form within the Bootstrap framework

login.html file: {% extends "base.html" %} {% block content %} <div class="container login-page-form"> <form id="login-form" action="/auth/login" method="post"> <div class="f ...

htmlcssbootstrap-4

Unlock the potential of Bootstrap 4 in Vue.js 2 without the need for bootstrap-vue

I'm interested in finding a way to incorporate bootstrap 4 into my vue.js 2.6 framework. Despite the abundance of tutorials available, many of them are outdated as of late 2020, or they insist on using bootstrap-vue, which introduces unwanted addition ...

javascriptcssvue.jsbootstrap-4

Tips for efficiently printing invoices on specific paper: Print a maximum of 20 items per sheet, and if it exceeds this limit, continue onto the next page. Ensure the total amount is

$(document).ready(function(){ var j = 23; for (var i = 0; i < j+11; i++) { if (i != 0 && i % 11 == 0) { $("#printSection div").append("<?php echo '<tr><td>fff</td></tr>'; ?>"); ...

javascriptjqueryhtmlcss

The CSS property `touchmove pointer-events: none` appears to have a malfunction on Chrome for Android version 4.4 / ChromeView

For my project, I am utilizing CSS pointer-events to allow touchmove events to pass through a transparent div. This method has been effective on most platforms except for Chrome on Android. I am curious if this is a known issue with Chrome and if there are ...

csshtmlcordovagoogle-chrome

Guide to performing an Ajax call on click event to a PHP file using jQuery

I have a hyperlink directing to domain.com. When someone clicks on it, I want an ajax call to be made to counter.php with 2 variables posted, in order to increase the views for that link by 1. Here is the hyperlink: <a href="http://www.domain.com" onC ...

phpjqueryajaxonclick

What methods can I use to obtain negative numbers through swipe detection?

In my code, I am using three variables. The first one is x which serves as the starting point, followed by myCount which counts the number of swipes a user performs, and finally, dist which calculates the distance from the initial point. I want to set myC ...

javascriptjqueryhtmlcssswipe

Sending information from JavaScript to Python scripts: best practices

Within this HTML file, I have included a script where an ajax request is being made to pass a specific string to a Python function. var message = "hello there!!!" $.ajax({ url: "../SCRIPTS/cond.py", type: 'POST', ...

javascriptpythonhtmljqueryajax

How can I attach an existing event to a dynamically loaded element using AJAX?

In the main page of my website, there is a button: <button class="test">test</button> Additionally, I have included the following script in my code: $('.test').on('click',function(){ alert("YOU CLICKED ME"); } ...

javascriptjqueryajaxeventsdom