Как добавить свою анимацию на ajax views | Блог разрабочика

Идея такая сделать обновление по фильтру что бы было видно, как новые элементы появляются, а старые исчезают.

Реализуется как оказалось не сложно.

Нам нужно подменить ajax событие меняющее наш views на странице.

- VIEWS_NAME - имя views.
- DISPLAY_ID - машинное имя отображения.
- ajax_command_invoke вывозит $.fn.sync() которая уже будет обрабатывать логику замены.


/**
 * Implements hook_views_ajax_data_alter().
 */
function hook_views_ajax_data_alter(&$commands, $view) {
  switch ("{$view->name}:{$view->current_display}") {
    case 'VIEWS_NAME:DISPLAY_ID':
      foreach ($commands as &$command) {
        if ($command['command'] == 'insert') {
          $command = ajax_command_invoke($command['selector'], 'sync', array(
            $command['data'],
          ));
        }
      }
      break;
  }
}

Наш мини плагин Sync.

Скрипт ищет все новые и старые элементы выборки и помечает их is-new и is-old.

Потом ждёт когда пройдёт анимация исчезновения "is-old" (300ms).
И заменяет наш views на новый.
На котором уже срабатывает анимация появление "is-new".

$oldElements - видит все элементы что присутствуют на странице.
$newElements - видит элементы которые пришли по ajax выборке.
$views - это dom элемент нашего views на странице.


(function ($, Drupal, window, document, undefined) {
  $.fn.sync = function (data) {
    var $views = $(this);
    var $oldElements = $('section.content > *', $views);
    var $data = $(data);
    var $newElements = $('section.content > *', $data);
    var timer = null;

    // find new element
    $newElements.filter(function () {
      var $find = $oldElements.filter('[about="' + $(this).attr('about') + '"]');

      if (!$find.size()) {
        $(this).removeClass('is-old').addClass('is-new');
      }
    });

    // find old element
    $oldElements.filter(function () {
      var $find = $newElements.filter('[about="' + $(this).attr('about') + '"]');

      if (!$find.size()) {
        $(this).removeClass('is-new').addClass('is-old');
      }
    });

    // new data
    timer = setTimeout(function () {
      $views.replaceWith($data);
      Drupal.attachBehaviors($data.get(0), Drupal.settings);
    }, 300);
  };
})
(jQuery, Drupal, this, this.document);

Вы можете использовать любую анимацию которая вам придёт в голову.

Вот мой вариант.


@keyframes HIDDEN {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(0.3);
    }
}

@keyframes SHOW {
    0% {
        transform: scale(0.3);
    }
    95% {
        transform: scale(1.05);
    }
    100% {
        transform: scale(1);
    }
}

.is-old {
  animation: HIDDEN 0.3s ease forwards;
}

.is-new {
  animation: SHOW 0.3s ease forwards;
}

Хорошей вёрстки ;)