Задать вопрос
  • Чем webpack лучше gulp/grunt?

    Webpack - это система сборки с массой возможностей. В частности, он анализирует JS-код (а также CSS или другой, через лоадеры), это даёт ему superpowers.

    Gulp/grunt - это общая система для организации задач, которая сама по себе сборку не поддерживает, но её можно на ней написать, с помощью плагинов. При этом анализа кода, скорее всего, не будет, а значит ряд продвинутых фич отпадут.

    То есть, это две разные вещи. В качестве одной из задач на gulp/grunt вполне может быть сборка webpack, так обычно и делают.

    Простую сборку вполне можно написать и на gulp/grunt напрямую. А если посложнее или просто хочется иметь задел "на будущее", то можно воспользоваться специальным инструментом (Webpack).

    P.S. У меня когда-то были и gulp task'и сборщики и browserify, но уже давно их место плотненько занял Webpack.
    Ответ написан
    18 комментариев
  • Есть такой код: 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();
        })
      })


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