react-beautiful-dnd でドロップ時のアニメーションをスキップする

はじめに

こんにちは。開発事業部でエンジニアをしている西村です。

かなりピンポイントですが、今回は react-beautiful-dnd を使用してドラッグ＆ドロップを実装する際に、ドロップ時のアニメーションをスキップする方法についてご紹介します。

※本記事では、react-beautiful-dnd の基本的な使い方は解説しません！

react-beautiful-dnd を導入した経緯

弊社が提供している動画学習プラットフォーム kikagaku.ai では、2022 年 7 月 14 日に「お気に入り機能」をリリースいたしました！

「お気に入り機能」は、好きなコンテンツを自身の作成したリストに保存する機能です。

資料を整理し、日々の学習や振り返りの際に役立てていただくことができます。

この機能について、リリース直前にユーザーテストを実施したのですが、「ドラッグ＆ドロップで操作できた方が便利だよね！」というご意見をいただき、急遽ドラッグ＆ドロップ機能を実装することになりました！

その実装に当たって、react-beautiful-dnd を導入しました。

サンプルや参考になる記事が沢山あり、ドラッグ＆ドロップ機能の実装はスムーズにできたのですが、「アニメーションをスキップしたい…」という事態が発生し、そこで少し詰まりました。

なぜアニメーションをスキップしたかったのか

react-beautiful-dnd では設定範囲外でドロップした時に、元々いた場所に戻ってくるアニメーションがデフォルトで設定されています。

設定範囲外にドロップした際に、表示している枠内から削除する仕様で実装を進めていたのですが、下に添付している gif のように一旦戻ってくるのが気持ち悪く、このアニメーションをスキップしたい…と考えました。

結論

transitionDurationを限りなく0に近い値にする。

公式のドキュメントに記載がありました。

If you do have use case where it makes sense to remove the drop animation you will need to add a [transition-duration](https://developer.mozilla.org/en-US/docs/Web/CSS/transition-duration) property of almost 0s. This will skip the drop animation.

Do not make the transition-duration actually 0s. It should be set at a near 0s value such as 0.001s. The reason for this is that if you set transition-duration to 0s then a onTransitionEnd event will not fire - and we use that to know when the drop animation is finished.

github.com

適当に要約すると、「 transitionDuration を限りなく 0s に近い値にすることで、アニメーションをスキップできる。0s にすると、onTransitionEnd イベントが発生しなくなり、ドロップアニメーションの終了を感知できなくなるので、0s ではなく 0s に近い値にする」とのこと。

下記は同ページに記載してあるコードのコピペですが、下のような感じで書いて transitionDuration に 0s に近い値を入れてあげれば 問題ないようです。

function getStyle(style, snapshot) {
if (!snapshot.isDropAnimating) {
return style;
}
return {
...style,
// cannot be 0, but make it super tiny
transitionDuration: 0.001s,
//↑ここを 0s に近い値にすることでスキップできる！
};
}

function TaskItem(props) {
const { task, index } = props;
return (
<Draggable draggableId={[task.id](http://task.id/)} index={index}>
{(provided, snapshot) => (
<div
innerRef={provided.innerRef}
{...provided.draggableProps}
{...provided.dragHandleProps}
style={getStyle(provided.draggableProps.style, snapshot)}
>
{task.content}
</div>
)}
</Draggable>
);
}

実際にやってみた

transitionDuration を 0.001s にすることで、アニメーションを消すことに成功し、違和感なくリストから削除できるようになりました！

終わりに

今回は react-beautiful-dnd でアニメーションをスキップする方法についてご紹介しました！

react-beautiful-dnd はとても簡単にドラッグ＆ドロップが実装できるので、サクッと実装したい！という方には非常におすすめです。

今回ご紹介したのは特殊なケースかもしれませんが、どなたかの役に立てば幸いです！

もしこの記事が参考になったよ！という方がいらっしゃいましたら、採用情報も覗いてみてください！ 皆様のご応募お待ちしております！！