Правильное всплывающее окно jquery с display: flex

323

04 сентября 2017, 08:02

Как сделать плавно появляющееся и скрывающееся модальное окно, как $(obj).fadeIn() - $(obj).fadeOut(), только с display: flex?

Понимаю, что вышеупомянутые функции работают с display: block, что мне не подходит. Как сделать свою функцию fadeIn - fadeOut, но с display: flex?

Я попробовал сделать так:

<div class="bouquet" data-id="3">
    <a href="#" class="bouquet__addcart">В корзину</a>
</div>
<div id="popup_productadded">
    <p>Добавлено в корзину</p>
</div>

jQuery:

$(document).on('click', '.bouquet__addcart', function(e){
    e.preventDefault();         
    var popup = $('#popup_productadded');
     //добавляем display: flex, но opacity пока что 0
    popup.addClass('popup_productadded_active');
    //тут уже меняем opacity на 1, за это отвечает данный класс
    setTimeout(function(){
        popup.addClass('popup_productadded_active-show');   
    }, 10);
    //тут уже убираем модальное окно через 4 сек.
    setTimeout(function(){
        popup.removeClass('popup_productadded_active-show');    
        setTimeout(function(){
            popup.removeClass('popup_productadded_active'); 
        }, 100);    
    }, 4000);       
});

Но чувствую, что костыли костыльные. Кто подскажет более правильное решение?

Answer 1

Не знаю что у вас, а у меня он флексом и остается.

$('nav').fadeOut(); 
$('p').html($('nav').css("display")); 
$('nav').fadeIn(); 
$('p').html($('nav').css("display"));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<nav style="display:flex; height:100px;"> 
  <li style="background:#f00; flex:1;"> 
  <li style="background:#0f0; flex:1;"> 
  <li style="background:#00f; flex:1;"> 
</nav> 
<p></p>

Answer 2

Можно воспользоваться animatewithsass, а далее дело техники. Т.к. окно у вас имеет position отличный от relative, то можно воспользоваться свойством visibility, играя с этим свойством анимация работает адекватно.

Answer 3