feat: add animation for history preview (#5966)

<div class='graphite__hidden'>
          <div>🎥 Video uploaded on Graphite:</div>
            <a href="https://app.graphite.dev/media/video/T2klNLEk0wxLh4NRDzhk/5ce45d13-1117-4853-a066-e8ab1446eb4f.mp4">
              <img src="https://app.graphite.dev/api/v1/graphite/video/thumbnail/T2klNLEk0wxLh4NRDzhk/5ce45d13-1117-4853-a066-e8ab1446eb4f.mp4">
            </a>
          </div>
<video src="https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/T2klNLEk0wxLh4NRDzhk/5ce45d13-1117-4853-a066-e8ab1446eb4f.mp4">Kapture 2024-02-29 at 18.54.15.mp4</video>

tests/storybook/src/stories/page-list.stories.tsx

@@ -13,14 +13,20 @@ import {
   PageTags,
   type PageTagsProps,
 } from '@affine/core/components/page-list';
+import { workbenchRoutes } from '@affine/core/router';
 import { __unstableSchemas, AffineSchemas } from '@blocksuite/blocks/models';
 import { PageIcon, TagsIcon } from '@blocksuite/icons';
 import { Schema, Workspace } from '@blocksuite/store';
+import { expect } from '@storybook/jest';
 import type { Meta, StoryFn } from '@storybook/react';
 import { userEvent } from '@storybook/testing-library';
 import { initEmptyPage } from '@toeverything/infra';
 import { useState } from 'react';
-import { withRouter } from 'storybook-addon-react-router-v6';
+import {
+  reactRouterOutlets,
+  reactRouterParameters,
+  withRouter,
+} from 'storybook-addon-react-router-v6';
 
 export default {
   title: 'AFFiNE/PageList',
@@ -41,6 +47,11 @@ AffineOperationCell.args = {
   onDisablePublicSharing: () => toast('Disable public sharing'),
   onRemoveToTrash: () => toast('Remove to trash'),
 };
+AffineOperationCell.parameters = {
+  reactRouter: reactRouterParameters({
+    routing: reactRouterOutlets(workbenchRoutes),
+  }),
+};
 AffineOperationCell.play = async ({ canvasElement }) => {
   {
     const button = canvasElement.querySelector(