0

Как сделать плавно появляющееся и скрывающееся модальное окно, как $(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);       
});

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

1
  • Анимацию можно вообще на css сделать через toggleClass
    – InDevX
    4 июл 2020 в 1:36

4 ответа 4

0

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

$('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>

0

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

3
  • При чем тут sass?
    – user245150
    3 сен 2017 в 7:48
  • @Duox При том, что автор пытается сделать анимацию fadeIn / fadeOut. Было бы уместно ему попробовать SASS.
    – Shmasya
    3 сен 2017 в 9:42
  • @Shmasya задам тот же вопрос - причем тут sass?...
    – InDevX
    4 июл 2020 в 1:36
0

Недавно тоже задался подобным вопросом, погуглив нашёл вот такое решение:

$(el)                     // Берём элемент
  .css('display', 'flex') // Даём ему display: flex;
  .hide()                 // Скрываем (в памяти останется, что он display: flex)
  .fadeIn()               // А теперь работает fadeIn, slideDown и show.
                          // При этом элемент уже будет иметь свойство display: flex

Пример:

$('.toggle').on('click', function(){
  let e = $(this).text() === 'Открыть' ? true : false;
  $(this).text(e ? 'Закрыть' : 'Открыть');
  e ? $('.flex').css('display', 'flex').hide().fadeIn(500) : $('.flex').fadeOut(500);
});
.toggle {
  color: blue;
  cursor: pointer;
}

.flex {
  display: none;
  flex-direction: row;
  justify-content: space-between;
  width: 50vw;
  height: 50vh;
  background: red;
  padding: 5px;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.flex > div {
  width: 20vw;
  height: 50vh;
  background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="toggle">Открыть</div>

<div class="flex">
  <div></div>
  <div></div>
</div>

Для обратного действия из display: flex; в display: none никаких действий не требуется.

-2
$(obj).fadeOut().css('display','flex');

Для остального аналогично.

0

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.