Как добавить анимацию появления блоков?

Question

[flowersFront]

сейчас при переключении табов display none block,
мягкое переключение нужно
https://jsbin.com/libibezobi/edit?html,css,output

Answer 1

[Вадим]

pogugli.com/?384653 --> https://www.impressivewebs.com/animate-display-blo...

https://qna.habr.com/search?q=%D0%BA%D0%B0%D0%BA+%...

Правила сервиса

2.2 Убедиться в том, что в сети Интернет, и на страницах Сервиса в частности, отсутствуют ответы на данный вопрос. Специально для этого талантливые IT-специалисты создали и развивают поисковые системы Яндекс и Google.

Comments

[flowersFront]

Вадим , выше ссылки мне известны. Тут сложность из-за фильтрации

[Вадим]

flowersFront, То, что Вы стали сообщать дополнительные детали - это отлично. Не останавливайтесь на этом, если хотите получить релевантный ответ. В следующий раз - пишите ВСЮ полезную информацию в самом вопросе, а не комментариях.

Пишите конкретно. Я сделал вот то и вот так, хочу чтобы было так. Но возникает сложность с, потому что...

Иначе будем в угадайку играть.

[flowersFront]

Вадим, По ссылке - слайдер. Какие доп детали? Они все показаны.
А вы фантазируете

[Вадим]

flowersFront, правда в том, что фантазируете Вы и своей фантазией с нами не делитесь, но вопрос задаёте. Вы не даёте НИКАКОЙ информации о том какой конечный результат Вы хотели бы видеть и с чем у Вас возникает сложность.

Ну и тогда уже и нам приходится фантазировать... угадать а что же именно Вы хотите и в чём же действительно проблема...

[Вадим]

flowersFront, накидал на основе своей фанатзии, оно?

const $mySwiper = $(".mySwiper") // получаем jQuery element для нашего свайпер контейнера
  let swiperSlides = [ ...swiperCASES.slides ];
    $(document).on('click', '.case__box', function(e) {
      const filterData = e.target.dataset.filter;
      const check = filterData;
      
      $('.case__box').removeClass('case__box--active');
      $mySwiper.fadeOut(300, () => { // плавно скрываем его и в коллбэк функции, которая выполнится после скрытия делаем фильтрацию и тд
        swiperCASES.removeAllSlides()

        const slides = swiperSlides.filter((item, index) => $(item)[0].dataset.filter == check || filterData == "all")
      
        swiperCASES.params.grid.rows = slides.length <= swiperCASES.params.slidesPerView ? 1 : 2

        swiperCASES.appendSlide(slides)
        swiperCASES.updateProgress();
        swiperCASES.updateSize();
        swiperCASES.updateSlides();
        swiperCASES.update();

        $mySwiper.fadeIn(300) // и плавно возвращаем обратно
        $(this).addClass('case__box--active');
      })
      
    })

[flowersFront]

Вадим, не работает. https://jsbin.com/jawirakade/1/edit?html,css,output

[Вадим]

flowersFront, удивительно что не работает(нет). Ошибки в консоле смотрите? Куда Вы инициализацию свайпера дели?

[flowersFront]

Вадим, Вы правы.. Извините. Спасибо.

[Вадим]

flowersFront, Не за что. Обращайтесь. Задавать вопросы хорошо - тоже своего рода искусство. Ну как минимум навык :-)