Анимации

Три вещи анимируются сами: элементы, скользящие при сортировке, оверлей, приземляющийся при броске, и — если вы это включите — изменения ваших данных, сделанные не драгом. Каждая принимает одни и те же значения, на провайдере или ближе к тому, что она анимирует:

Каждая принимает true (тайминг по умолчанию), false (выключено), { duration, easing } или функцию, которая анимирует сама:

<DnDProvider
  :animation="{ duration: 180, easing: 'cubic-bezier(.2, .8, .2, 1)' }"
  :drop-animation="{ duration: 300 }"
  animate-changes
>

Собственные animation и animateChanges списка или дерева важнее, чем у провайдера; про dropAnimation см. для элемента и для цели. Остальное движение — ваше: оверлей, слот и списки — элементы с data-атрибутами и ref, и двигают их CSS или библиотека анимаций.

Сортировка

Во время драга черновик списка перестраивается, и элементы скользят на новые места. Рука ниже задаёт своему списку обе опции: выберите animation и сортируйте карты, выберите dropAnimation и отпустите одну.

<script setup lang="ts">
import { DnDProvider } from '@vue-dnd-kit/core';
import Hand from './Hand.vue';
</script>

<template>
  <DnDProvider>
    <Hand />
  </DnDProvider>
</template>

const springy: LayoutAnimation = ({ element, from, to, reducedMotion }) => {
  if (reducedMotion) return;
  return element.animate(
    [{ translate: `${from.left - to.left}px ${from.top - to.top}px` }, { translate: '0 0' }],
    { duration: 500, easing: 'cubic-bezier(.34, 1.56, .64, 1)' },
  );
};

const animation = shallowRef<LayoutAnimation>(true); // true, { duration: 600 }, springy or false
const dropAnimation = shallowRef<DropAnimation>(true); // true, { duration: 700 }, toss or false

const { items } = makeSortableList(table, {
  items: cards,
  strategy: 'horizontal',
  dropOutside: 'cancel', // let go off the table: the card flies back
  animation,
  dropAnimation,
});

Это FLIP на CSS-свойстве translate, через Web Animations API. translate складывается с любым вашим transform, так что позиционирование строк виртуального списка остаётся нетронутым. Когда элемент снова сдвигается до конца анимации, следующая начинается с того места, где он показан. Та же анимация двигает элементы при броске и при отмене.

animation списка принимает значение или ref, который читается для каждого перемещения: ref переключает её, как выше. Функция там — это анимация, а не геттер.

Бросок

При броске оверлей летит с места, где вы отпустили, в слот элемента; при отмене — обратно туда, откуда элемент начал. В руке выше выберите dropAnimation, затем утащите карту со стола и отпустите: бросок отменяется, и она летит обратно. toss — отдельная функция:

/** The overlay arcs to its slot, as if tossed. */
const toss: DropAnimation = ({ overlay, from, to, reducedMotion }) => {
  if (reducedMotion) return;
  // No visible slot to land on: fade out where it is.
  if (!to) return overlay.animate([{ opacity: 1 }, { opacity: 0 }], { duration: 200, fill: 'forwards' });
  const place = (x: number, y: number) => `translate3d(${x}px, ${y}px, 0)`;
  const rise = Math.min(120, Math.hypot(to.left - from.left, to.top - from.top) / 2);
  return overlay.animate(
    [
      { transform: place(from.left, from.top), width: `${from.width}px`, height: `${from.height}px` },
      { transform: place((from.left + to.left) / 2, Math.min(from.top, to.top) - rise), offset: 0.45 },
      { transform: place(to.left, to.top), width: `${to.width}px`, height: `${to.height}px` },
    ],
    { duration: 550, easing: 'ease-in-out', fill: 'forwards' },
  );
};

Рука передаёт её своему списку. На провайдере она приземляет каждый драг:

<DnDProvider :drop-animation="toss">

• Блок приземляется со своей позицией (transform) и размером (width, height): содержимое заново раскладывается в размере слота и никогда не масштабируется.
• Когда у элемента после броска нет видимого слота (он прокручен за пределы или брошен в папку или зону удаления), to равен null. Тогда по умолчанию оверлей растворяется, сжимаясь в зону, на которую его бросили (into), или на месте.
• При мульти-драге клоны остальных элементов приземляются в свои слоты сами, с таймингом по умолчанию, если dropAnimation — функция. В зону они уходят один за другим, а блок — после них (см. файлы и папки).
• dropAnimation читается при каждом броске: ref переключает её для следующего, как в руке, и так же — проп провайдера, привязанный к ref.
• Прокрутка во время приземления не сбивает его с пути. Блок — position: fixed, поэтому он следует за тем, на что приземляется (слот, зона, иначе цель, на которую его бросили), своим CSS translate, поверх transform, который двигает анимация. В своей анимации двигайте transform, как выше, а не translate.
• Следующий драг не ждёт: каждый бросок приземляется в собственном блоке, пока идут новые драги. Нажатие на приземляющийся блок ловит его в полёте, и драг продолжается с того места, где он находится. onDragSettle сообщает, когда оверлей драга добрался до места: корзина ниже тогда закрывает крышку.

Во время драга оверлей к тому же принимает размер слота, в который приземлится (overlayFit: 'slot', по умолчанию), так что броску редко нужно менять размер. См. оверлей.

Для элемента и для цели

dropAnimation провайдера — значение по умолчанию. Перетаскиваемый элемент, сортируемый элемент или список (для своих элементов) могут задать собственную, а цель может сказать последнее слово о том, что в неё приземляется: makeDroppable(el, { overDropAnimation }), overDropAnimation списка или дерева. Для каждого броска берётся первая заданная:

1. Анимация цели (при отмене цели нет).
2. Собственная анимация перетаскиваемого элемента.
3. Анимация его списка.
4. Анимация провайдера.

Ниже корзина, ваза и полка задают каждая свою. Полка приземляет свои товары с отскоком, у вазы собственное медленное приземление, а корзина забирает брошенное на неё в свою иконку: товар остаётся на полке, так что его слот там — не место для приземления. Под полкой подсвечивается та анимация, с которой приземляется каждый драг.

<script setup lang="ts">
import { DnDProvider } from '@vue-dnd-kit/core';
import Shop from './Shop.vue';
</script>

<template>
  <DnDProvider>
    <Shop />
  </DnDProvider>
</template>

// 3. The list's, for its items without one of their own.
makeSortableList(shelf, {
  items: products,
  strategy: 'horizontal',
  dropAnimation: { duration: 450, easing: 'cubic-bezier(.34, 1.56, .64, 1)' },
});

// 2. The item's own: it wins over its list's.
makeSortableItem(el, {
  item: () => props.product,
  dropAnimation: props.product.fragile ? { duration: 1100, easing: 'ease-in-out' } : undefined,
});

// 1. The target's: it wins over both.
const intoCart: DropAnimation = ({ overlay, from, reducedMotion }) => {
  const end = icon.value?.getBoundingClientRect();
  if (!end || reducedMotion) return;
  // Into the icon, shrinking: the box scales around its top left corner.
  const scale = end.height / from.height;
  const animation = overlay.animate(
    [
      { transform: `translate3d(${from.left}px, ${from.top}px, 0)` },
      {
        transform: `translate3d(${end.left + (end.width - from.width * scale) / 2}px, ${end.top}px, 0) scale(${scale})`,
        opacity: 0,
      },
    ],
    { duration: 450, easing: 'cubic-bezier(.55, 0, .75, .2)', fill: 'forwards' },
  );
  animation.finished.then(() => landed.value++, () => {}); // the icon bounces
  return animation;
};

makeDroppable(el, { id: 'cart', overDropAnimation: intoCart, onDrop: … });

false тоже считается заданной: цель с overDropAnimation: false оставляет оверлей там, где его бросили. Функция получает цель как over, так что одна функция может обрабатывать цели по-разному.

Собственное приземление содержимого

Бросок также ждёт анимации внутри оверлея, которые идут в момент его начала: CSS-анимации и переходы, которые компонент оверлея запускает при status: 'dropping'. Над корзиной фото сминается; после броска оно летит в корзину, и бросок заканчивается, когда оно внутри:

<script setup lang="ts">
import { DnDProvider } from '@vue-dnd-kit/core';
import Gallery from './Gallery.vue';
</script>

<template>
  <DnDProvider>
    <Gallery />
  </DnDProvider>
</template>

makeDroppable(el, {
  id: 'trash',
  // The overlay reads it as `over.data`: it aims the photo at the bin's mouth.
  data: () => ({ bin: bin.value }),
  overOverlay: Crumple,
  // The box stays where it was let go: its content does the landing.
  overDropAnimation: false,
  onDrop: (event) => emit('drop', event), // the gallery calls `event.source?.remove()`
});

// Its landing is over: the photo is in, the lid shuts.
useDnDMonitor({
  onDragSettle: (event) => {
    if ('dropped' in event && event.over?.id === 'trash') shut.value++;
  },
});

<template>
  <div class="crumple">
    <!-- `fall` is set at the drop: `--dx` and `--dy`, from the photo to the bin in `over.data`. -->
    <div class="paper" :class="{ falling: fall }" :style="fall">
      <slot />
    </div>
  </div>
</template>

<style scoped>
.paper { clip-path: polygon(…); rotate: -8deg; scale: 0.7; }
.paper.falling { animation: fall 0.55s forwards; }
@keyframes fall {
  to { translate: var(--dx) var(--dy); rotate: -120deg; scale: 0.12; opacity: 0; }
}
</style>

Завершённые анимации и бесконечные циклы не учитываются, и бросок ждёт не дольше двух секунд.

Изменения данных: animateChanges

Перетащите плитку, затем перемешайте, добавьте и удалите несколько. Драг анимируется по умолчанию; изменения от кнопок анимируются, потому что сетка включает animateChanges.

<script setup lang="ts">
import { DnDProvider } from '@vue-dnd-kit/core';
import Palette from './Palette.vue';
</script>

<template>
  <DnDProvider>
    <Palette />
  </DnDProvider>
</template>

makeSortableList(listRef, { items: swatches, animateChanges: true });

Выключенная по умолчанию, animateChanges анимирует то, что меняет ваш массив без драга: сортировку, перемешивание, перенос между списками одной группы, добавленный, удалённый или отфильтрованный элемент. В дереве она также охватывает строки, которые узел показывает или скрывает при раскрытии и сворачивании. <DnDProvider animate-changes> включает её для всех списков и деревьев.

Её части можно настроить по отдельности:

animateChanges: { duration: 250, move: true, enter: true, leave: { duration: 150 } },

duration и easing применяются ко всем частям; каждая часть принимает true, опции, false или функцию. Анимируются только элементы рядом с видимой областью, так что строки, которые виртуальный список не смонтировал, пропускаются. Опция читается при изменении items, поэтому её может переключать ref, как переключатель в демо.

Оверлей: подъём, наклон, посадка

Блок оверлея говорит, что он делает: data-dnd-overlay="dragging", пока следует за указателем, "dropping", пока приземляется. Блок двигает и задаёт ему размер библиотека. Внутри него data-dnd-overlay-content держит всё, что показывает оверлей, — один клон или целую стопку, — и анимируете его вы. Возьмите кандидата: оверлей приподнимается и наклоняется; отпустите — ложится ровно, приземляясь.

<script setup lang="ts">
import { ref } from 'vue';
import { DnDProvider } from '@vue-dnd-kit/core';
import Lane from './Lane.vue';

const lanes = ref([
  {
    id: 'applied',
    title: 'Applied',
    people: [
      { id: 'ava', name: 'Ava Stone', role: 'Designer', hue: 20 },
      { id: 'ben', name: 'Ben Ito', role: 'Engineer', hue: 200 },
      { id: 'cleo', name: 'Cleo Diaz', role: 'Writer', hue: 300 },
    ],
  },
  { id: 'interview', title: 'Interview', people: [{ id: 'dan', name: 'Dan Ruiz', role: 'Engineer', hue: 140 }] },
  { id: 'hired', title: 'Hired', people: [] },
]);
</script>

<template>
  <!-- `overlay-class`: the overlay's content, the whole of what follows the pointer, lifts as one. -->
  <DnDProvider overlay-class="pipeline-hand">
    <div class="pipeline">
      <Lane v-for="lane in lanes" :key="lane.id" :lane="lane" />
    </div>
  </DnDProvider>
</template>

<style scoped>
.pipeline {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}
</style>

<!-- Not scoped: the overlay's content element is the library's, rendered outside this component. -->
<style>
@media (prefers-reduced-motion: no-preference) {
  /* Picked up, the whole overlay lifts and tilts; let go, it lies flat again as it lands. */
  .pipeline-hand {
    transition:
      rotate 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
      scale 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
  }

  [data-dnd-overlay='dragging'] > .pipeline-hand {
    rotate: 3deg;
    scale: 1.05;
  }

  /* Where the lift starts: the box appears already `dragging`, a transition needs a before. */
  @starting-style {
    [data-dnd-overlay='dragging'] > .pipeline-hand {
      rotate: 0deg;
      scale: 1;
    }
  }
}
</style>

<template>
  <DnDProvider overlay-class="pipeline-hand">…</DnDProvider>
</template>

<!-- Not scoped: the overlay's content element is the library's, outside this component. -->
<style>
.pipeline-hand {
  transition:
    rotate 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
    scale 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
}

[data-dnd-overlay='dragging'] > .pipeline-hand {
  rotate: 3deg;
  scale: 1.05;
}

/* Where the lift starts: the box appears already `dragging`. */
@starting-style {
  [data-dnd-overlay='dragging'] > .pipeline-hand {
    rotate: 0deg;
    scale: 1;
  }
}
</style>

• overlay-class ставит ваши классы на содержимое оверлея этого провайдера: и текущего драга, и тех, что ещё приземляются. Tailwind тоже его принимает (starting: пишет @starting-style).
• Переходу нужно начало, а блок появляется уже в состоянии dragging: @starting-style даёт подъёму его «до». Когда блок становится dropping, переход идёт обратно, и бросок ждёт его окончания.
• Само содержимое анимируется так же, в своём компоненте: карточка в руке и колонки доски наклоняются, когда их берут ([data-dnd-overlay='dragging'] .column с @starting-style). Ключевые кадры тоже работают: они проигрываются с начала состояния.
• Компонент оверлея получает status как проп: его переходы могут следовать за ним. Заметка из демо слота провайдера выпрямляется с transition: rotate 0.25s, когда status становится 'dropping'.
• Сам блок ([data-dnd-overlay]) не трогайте: переход на нём отставал бы от указателя, а его transform и размер пишет библиотека.

Слот и списки

Перетаскиваемый элемент остаётся в своём списке как слот, в который приземлится, с пометкой data-dnd-placeholder. Его списки тоже знают о драге: isAccepting, пока идёт драг, который они принимают, isOver, пока он над ними. В воронке выше каждая колонка готовится, как только вы берёте кандидата, та, что под карточкой, подсвечивается, её счётчик подпрыгивает, а слот открывается и дышит.

<script setup lang="ts">
const { items, isOver, isAccepting } = makeSortableList(list, {
  id: props.lane.id,
  items: toRef(props.lane, 'people'),
  group: 'pipeline',
  dropzone: zone,
});
</script>

<template>
  <section ref="zone" class="lane" :class="{ ready: isAccepting, over: isOver }">
    <h3>
      {{ lane.title }}
      <!-- A new element for every count: its animation plays on each change. -->
      <span :key="items.length" class="count">{{ items.length }}</span>
    </h3>
    <ul ref="list">…</ul>
  </section>
</template>

<style scoped>
.lane { transition: background-color 0.25s, box-shadow 0.25s; }
.lane.ready { box-shadow: inset 0 0 0 1px color-mix(in srgb, #42b883 35%, transparent); }
.lane.over { background: color-mix(in srgb, #42b883 8%, transparent); box-shadow: inset 0 0 0 1.5px #42b883; }
.count { animation: bump 0.3s ease-out; }
</style>

/* The slot opens where it appears, then breathes until the card lands. */
.candidate[data-dnd-placeholder] {
  animation: open 0.2s ease-out, breathe 1.2s ease-in-out 0.2s infinite;
}

• items — черновик: его length учитывает карточку, как только её слот входит в колонку, поэтому счётчик меняется во время драга.
• Слот, переходящий в другой список, там — новый элемент, поэтому его ключевые кадры проигрываются снова.
• Сами списки плавно растут и сжимаются, когда слот входит и уходит, а вместе с ними и то, что вокруг (animateSize, включено по умолчанию; с false они меняются скачком). Оставьте их размеры этому: список, размер которого вы меняете во время драга, сдвигает цели под указателем. Свечение, обводка, цвета и scale безопасны.

Свои анимации

Каждая опция принимает и функцию. Она получает контекст, запускает анимацию и возвращает её Animation, промис, который завершается по её окончании, или ничего. Драг заканчивается вместе с анимацией броска, а уходящая копия удаляется вместе со своей анимацией, но ни то, ни другое не ждёт дольше секунды сверх options.duration (250 ms для броска, 200 ms для остальных).

// animation, animateChanges.move: an item moved from `from` to `to`
({ key, element, from, to, options, reason, signal, reducedMotion }) => Animation | Promise | void
// dropAnimation: `to` is null when there is no visible slot; `into` is the zone it went into
({ overlay, from, to, into, reason, active, options, reducedMotion }) => …
// animateChanges.enter: the element is already in place
({ key, element, to, options, reducedMotion }) => …
// animateChanges.leave: `element` is a copy where the item was, removed when you finish
({ key, element, from, options, reducedMotion }) => …

reason говорит, почему: 'drag' или 'change' для перемещения, 'drop' или 'cancel' для оверлея. options содержит тайминг опции, так что функция может следовать за duration, который вы задали рядом с ней.

Три правила держат свои анимации в согласии с библиотекой:

• Анимируйте translate от from - to до нуля, а не transform. Он складывается с трансформациями, которые ставят на строки виртуальные списки или ваш CSS, а драги измеряют элементы без него.
• Учитывайте signal. Он срабатывает, когда элемент снова сдвигается до конца анимации. Сразу остановите анимацию и очистите её стили: раскладка измеряется сразу после этого. Возвращённую Animation отменят за вас.
• Приземляйте в слот позицией и размером (width, height), а не scale: содержимое оверлея заново раскладывается в размере слота. Там, где слота для приземления нет, сжатие подходит: по умолчанию оверлей уменьшается в зону (into), а корзина выше — в свою иконку.

motion

Гирлянда ниже работает на motion: флажки и бросок пружинят через функции провайдера, а компонент оверлея раскачивается в зависимости от скорости указателя.

<script setup lang="ts">
import { animate } from 'motion-v';
import { DnDProvider, type DropAnimationContext, type LayoutAnimationContext } from '@vue-dnd-kit/core';
import Garland from './Garland.vue';

const spring = { type: 'spring', duration: 0.5, bounce: 0.3 } as const;

/** Flags spring to their new places, on the CSS `translate` property. */
const move = ({ element, from, to, signal, reducedMotion }: LayoutAnimationContext) => {
  if (reducedMotion) return;
  const controls = animate(element, { translate: [`${from.left - to.left}px ${from.top - to.top}px`, '0px 0px'] }, spring);
  // The flag moves again before it arrives: stop and clear at once, the library measures next.
  signal.addEventListener('abort', () => {
    controls.stop();
    element.style.translate = '';
  });
  return controls.finished;
};

/** The overlay springs onto its slot: its position and its size. */
const drop = ({ overlay, from, to, reducedMotion }: DropAnimationContext) => {
  if (reducedMotion) return;
  if (!to) return animate(overlay, { opacity: 0 }, { duration: 0.18 }).finished;
  return animate(
    overlay,
    { x: [from.left, to.left], y: [from.top, to.top], width: [from.width, to.width], height: [from.height, to.height] },
    spring,
  ).finished;
};
</script>

<template>
  <DnDProvider :animation="move" :drop-animation="drop">
    <Garland />
  </DnDProvider>
</template>

<script setup lang="ts">
import { animate } from 'motion-v';
import { DnDProvider, type DropAnimationContext, type LayoutAnimationContext } from '@vue-dnd-kit/core';

const spring = { type: 'spring', duration: 0.5, bounce: 0.3 } as const;

const move = ({ element, from, to, signal, reducedMotion }: LayoutAnimationContext) => {
  if (reducedMotion) return;
  const controls = animate(element, { translate: [`${from.left - to.left}px ${from.top - to.top}px`, '0px 0px'] }, spring);
  signal.addEventListener('abort', () => {
    controls.stop();
    element.style.translate = '';
  });
  return controls.finished;
};

const drop = ({ overlay, from, to, reducedMotion }: DropAnimationContext) => {
  if (reducedMotion) return;
  if (!to) return animate(overlay, { opacity: 0 }, { duration: 0.18 }).finished;
  return animate(
    overlay,
    { x: [from.left, to.left], y: [from.top, to.top], width: [from.width, to.width], height: [from.height, to.height] },
    spring,
  ).finished;
};
</script>

<template>
  <DnDProvider :animation="move" :drop-animation="drop">
    <Garland />
  </DnDProvider>
</template>

Компонент оверлея рендерится под провайдером, поэтому в нём работает useDnD(). Он следует за указателем через motion value:

<script setup lang="ts">
import { motion, useMotionValue, useReducedMotion, useSpring, useTransform, useVelocity } from 'motion-v';
import { useDnD, type DnDStatus, type DragItem } from '@vue-dnd-kit/core';

const props = defineProps<{ items: DragItem[]; status: DnDStatus }>();

const { pointer } = useDnD();
const x = useMotionValue(pointer.value?.x ?? 0);
watch(() => pointer.value?.x, (value) => value !== undefined && x.set(value));
const swing = useSpring(useTransform(useVelocity(x), [-1500, 0, 1500], [-25, 0, 25]), { stiffness: 300, damping: 14 });
const calm = useReducedMotion();
</script>

<template>
  <!-- Held by its top edge: `transform-origin: 50% 0` in its CSS. -->
  <motion.div
    class="flag-overlay"
    :style="{ rotate: calm ? 0 : swing }"
    :animate="{ scale: status === 'dropping' || calm ? 1 : 1.1 }"
  >
    …
  </motion.div>
</template>

GSAP

import gsap from 'gsap';
import type {
  DropAnimationContext,
  EnterAnimationContext,
  LayoutAnimationContext,
  LeaveAnimationContext,
  Rect,
} from '@vue-dnd-kit/core';

const move = ({ element, from, to, signal, reducedMotion }: LayoutAnimationContext) => {
  if (reducedMotion) return;
  const tween = gsap.fromTo(
    element,
    { translate: `${from.left - to.left}px ${from.top - to.top}px` },
    { translate: '0px 0px', duration: 0.4, ease: 'power3.out' },
  );
  signal.addEventListener('abort', () => tween.revert());
  return tween.then();
};

const box = (rect: Rect) => ({ x: rect.left, y: rect.top, width: rect.width, height: rect.height });

const drop = ({ overlay, from, to, reducedMotion }: DropAnimationContext) => {
  if (reducedMotion) return;
  if (!to) return gsap.to(overlay, { opacity: 0, duration: 0.2 }).then();
  return gsap.fromTo(overlay, box(from), { ...box(to), duration: 0.45, ease: 'back.out(1.2)' }).then();
};

const enter = ({ element, reducedMotion }: EnterAnimationContext) =>
  gsap.from(element, reducedMotion ? { opacity: 0, duration: 0.2 } : { opacity: 0, scale: 0.85, duration: 0.35 }).then();

const leave = ({ element, reducedMotion }: LeaveAnimationContext) =>
  gsap.to(element, reducedMotion ? { opacity: 0, duration: 0.2 } : { opacity: 0, scale: 0.85, duration: 0.25 }).then();

export const gsapAnimations = { animation: move, dropAnimation: drop, animateChanges: { move, enter, leave } };

<DnDProvider v-bind="gsapAnimations">

Полные типы опций — в Анимациях.

Уменьшение движения

С prefers-reduced-motion: reduce собственные анимации библиотеки не выполняются: элементы и оверлей сразу встают на места, а оверлей не плавно меняет размер между слотами. Ваши функции выполняются всегда, с reducedMotion: true, так что решают они: пропустить движение или оставить короткое затухание, как рецепты выше.

Ваш CSS — ваша забота. Помещайте подъёмы, наклоны и пульсации в @media (prefers-reduced-motion: no-preference), как демо на этой странице, а смену цветов оставляйте снаружи: она показывает, куда попадёт бросок.

Изменения раскладки не от библиотеки

Когда во время драга строки двигает что-то другое — виртуализатор, заново измеряющий строки, загрузка изображения, — вызовите captureLayout() списка прямо перед тем, как изменение отрендерится. Он измеряет строки там, где они есть, и после следующего рендера анимирует их на новые места. Вне драга он ничего не делает. См. Виртуальные списки.