react-sortable-hoc设置transitionDuration后过渡效果仍不生效如何解决？

核心问题排查及修复步骤 #

• 首先确认transitionDuration属性是挂载在SortableContainer组件上，而非SortableElement组件，该属性属于容器层全局配置，单位为毫秒，例如配置transitionDuration={300}即代表所有列表项的过渡时长为300ms。
• 必须手动给可排序元素添加位移相关的CSS过渡属性，react-sortable-hoc本身不会自动注入过渡样式，你需要给SortableElement绑定的DOM元素新增如下样式：

.sortable-item {
  /* 过渡属性和时长要和组件配置的transitionDuration保持一致 */
  transition: transform 0.3s ease;
}

• 确认SortableElement的key属性是和列表项绑定的唯一固定值，不要使用数组下标index作为key，否则重排时React会直接复用DOM节点，不会触发过渡动画。
• 排查是否存在全局样式覆盖了transform或者transition属性，例如拖拽过程中给元素设置了transform: none、transition: none等规则，都会导致动画失效。

最小可用实现参考 #

你可以对照如下代码调整你的实现：

import React, { Component } from 'react';
import { SortableContainer, SortableElement } from 'react-sortable-hoc';
import arrayMove from 'array-move';
import './App.css';

const SortableItem = SortableElement(({ value }) => (
  <div className="sortable-item">{value}</div>
));

const SortableList = SortableContainer(({ items }) => {
  return (
    <div className="list-container">
      {items.map((value, index) => (
        <SortableItem
          // key用业务唯一值，不要用index
          key={`item-${value}`}
          index={index}
          value={value}
        />
      ))}
    </div>
  );
});

class App extends Component {
  state = {
    items: ['项目1', '项目2', '项目3', '项目4', '项目5', '项目6'],
  };
  onSortEnd = ({ oldIndex, newIndex }) => {
    this.setState(({ items }) => ({
      items: arrayMove(items, oldIndex, newIndex),
    }));
  };
  render() {
    return (
      <SortableList
        items={this.state.items}
        onSortEnd={this.onSortEnd}
        // transitionDuration配置在容器组件上
        transitionDuration={300}
      />
    );
  }
}

export default App;

对应的App.css样式：

.sortable-item {
  padding: 12px;
  margin: 8px 0;
  background: #f5f5f5;
  border-radius: 4px;
  cursor: grab;
  /* 过渡动画生效的核心配置 */
  transition: transform 0.3s ease;
}

.sortable-item:active {
  cursor: grabbing;
}

内容的提问来源于stack exchange，提问作者maczzz