Задать вопрос
  • Как изменить виджет корзины Woocommerce?

    Punkie
    @Punkie
    После каждого изменения корзины мменяйте кол-во товаров в ней. Корзина жестко кешируется, потому вы не видите изменений.
    Ответ написан
    3 комментария
  • Есть такой код: success: function(data) { $('#engine').html(data);} как сделать плавное появление блока?

    @kulaeff
    Front-end developer
    Из вопроса не понятно, в каком состоянии находится блок #engine, но предположу, что он скрыт и после загрузки данных должен плавно появляться. В таком случае существует три варианта:
    1. использовать jQuery и его метод fadeIn()
    2. использовать другую либу для анимации, например, GSAP, Velocity и т.д.
    3. использовать CSS анимацию


    Наиболее предпочтительным будет третий вариант, хотя бы потому, что не нужно перекладывать на JS то, что можно сделать средствами CSS. Суть этого варианта в том, что скрытый блок сначала показывается, а затем через минимальный промежуток времени анимируется его прозрачность. Такой хак делается потому, что свойство display нельзя анимировать.

    Таким образом, имеем следующие стили:
    #engine {
      display: none;
      opacity: 0;
    }
    #engine.active {
      display: block;
    }
    #engine.animate {
      opacity: 1;
      transition: opacity 1s linear;
    }


    Перед отправкой AJAX-запроса блок #engine скрыт и прозрачен. После того, как данные получены, присваиваем блоку класс .active. Он по-прежнему не видим, поскольку прозрачен. Далее, через минимальный промежуток времени (думаю хватит 10мс), присваиваем блоку класс animate, что приводит к плавному появлению блока. В коде это будет выглядеть так:

    $.get(...)
      .success(function(data) {
        $('#engine').html(data);
        $('#engine').addClass('active').delay(10).queue(function() {
          $(this).addClass('animate').dequeue();
        })
      })


    Пример
    Ответ написан
    Комментировать