style: fix animation (#5243)

* style: fix animation * fix(animation): correct animation name typos in multiple components
2025-12-29 05:51:26 +08:00 · 2025-04-23 22:31:26 +08:00 · 2025-04-23 22:31:26 +08:00 · a5d31b685c
commit a5d31b685c
parent a01e6b933b
13 changed files with 49 additions and 33 deletions
--- a/src/renderer/src/assets/styles/animation.scss
+++ b/src/renderer/src/assets/styles/animation.scss
@ -16,3 +16,40 @@
  --pulse-size: 8px;
  animation: animation-pulse 1.5s infinite;
 }
+
+// Modal动画
+@keyframes animation-move-down-in {
+  0% {
+    transform: translate3d(0, 100%, 0);
+    transform-origin: 0 0;
+    opacity: 0;
+  }
+  100% {
+    transform: translate3d(0, 0, 0);
+    transform-origin: 0 0;
+    opacity: 1;
+  }
+}
+@keyframes animation-move-down-out {
+  0% {
+    transform: translate3d(0, 0, 0);
+    transform-origin: 0 0;
+    opacity: 1;
+  }
+  100% {
+    transform: translate3d(0, 100%, 0);
+    transform-origin: 0 0;
+    opacity: 0;
+  }
+}
+.animation-move-down-enter,
+.animation-move-down-appear {
+  animation-name: animation-move-down-in;
+  animation-fill-mode: both;
+  animation-duration: 0.25s;
+}
+.animation-move-down-leave {
+  animation-name: animation-move-down-out;
+  animation-fill-mode: both;
+  animation-duration: 0.25s;
+}
--- a/src/renderer/src/components/Popups/NutsorePathPopup.tsx
+++ b/src/renderer/src/components/Popups/NutsorePathPopup.tsx
@ -26,7 +26,7 @@ const PopupContainer: React.FC<Props> = ({ resolve, fs }) => {
    <Modal
      open={open}
      title={t('settings.data.nutstore.pathSelector.title')}
-      transitionName="ant-move-down"
+      transitionName="animation-move-down"
      afterClose={onClose}
      onCancel={onClose}
      footer={null}
--- a/src/renderer/src/components/Popups/SearchPopup.tsx
+++ b/src/renderer/src/components/Popups/SearchPopup.tsx
@ -33,7 +33,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
      afterClose={onClose}
      title={null}
      width="920px"
-      transitionName="ant-move-down"
+      transitionName="animation-move-down"
      styles={{
        content: {
          padding: 0,
--- a/src/renderer/src/components/Popups/SelectModelPopup.tsx
+++ b/src/renderer/src/components/Popups/SelectModelPopup.tsx
@ -368,7 +368,7 @@ const PopupContainer: React.FC<PopupContainerProps> = ({ model, resolve }) => {
      onCancel={onCancel}
      afterClose={onClose}
      width={600}
-      transitionName="ant-move-down"
+      transitionName="animation-move-down"
      styles={{
        content: {
          borderRadius: 20,
--- a/src/renderer/src/components/Popups/TemplatePopup.tsx
+++ b/src/renderer/src/components/Popups/TemplatePopup.tsx
@ -35,7 +35,7 @@ const PopupContainer: React.FC<Props> = ({ title, resolve }) => {
      onOk={onOk}
      onCancel={onCancel}
      afterClose={onClose}
-      transitionName="ant-move-down"
+      transitionName="animation-move-down"
      centered>
      <Box mb={8}>Name</Box>
    </Modal>
--- a/src/renderer/src/components/Popups/TextEditPopup.tsx
+++ b/src/renderer/src/components/Popups/TextEditPopup.tsx
@ -69,7 +69,7 @@ const PopupContainer: React.FC<Props> = ({ text, textareaProps, modalProps, reso
      title={t('common.edit')}
      width="60vw"
      style={{ maxHeight: '70vh' }}
-      transitionName="ant-move-down"
+      transitionName="animation-move-down"
      okText={t('common.save')}
      {...modalProps}
      open={open}
--- a/src/renderer/src/components/Popups/UserPopup.tsx
+++ b/src/renderer/src/components/Popups/UserPopup.tsx
@ -127,7 +127,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
      onOk={onOk}
      onCancel={onCancel}
      afterClose={onClose}
-      transitionName="ant-move-down"
+      transitionName="animation-move-down"
      centered>
      <Center mt="30px">
        <VStack alignItems="center" gap="10px">
--- a/src/renderer/src/pages/knowledge/components/KnowledgeSearchPopup.tsx
+++ b/src/renderer/src/pages/knowledge/components/KnowledgeSearchPopup.tsx
@ -104,7 +104,7 @@ const PopupContainer: React.FC<Props> = ({ base, resolve }) => {
      width={800}
      footer={null}
      centered
-      transitionName="ant-move-down">
+      transitionName="animation-move-down">
      <SearchContainer>
        <Search
          placeholder={t('knowledge.search_placeholder')}
--- a/src/renderer/src/pages/settings/AssistantSettings/index.tsx
+++ b/src/renderer/src/pages/settings/AssistantSettings/index.tsx
@ -85,28 +85,7 @@ const AssistantSettingPopupContainer: React.FC<Props> = ({ resolve, tab, ...prop
      afterClose={afterClose}
      footer={null}
      title={assistant.name}
-      /*******************************************
-       * IMPORTANT: The Comment of transitionName is because:
-       *
-       * When in the production mode,
-       * if some of the antd components(like Select or not showing the assistant tab) not loaded beforehand,
-       * the modal will not close properly when using unofficially transitionName(like ant-move-down).
-       *
-       * The resason may be that the antd CSS-in-JS is not loaded the unofficially ant-xxx-xxx motions,
-       * this will cause the modal close process being interrupted.
-       * see antd issue for more details: https://github.com/ant-design/ant-design/issues/29626
-       *
-       * The deeper reason may be that the css/js chunking handle method is different between dev and prod envs
-       * If we want to solve the problem completely, we need to refactor the antd someway.
-       *
-       * The temporary solution is:
-       * 1. not set transitionName (transitionName is no longer supported in antd 5+)
-       * 2. set timeout to execute the modal resolve()
-       * 3. load the other complex antd components(like Select) beforehand
-       *
-       * we take the first solution for now.
-       */
-      // transitionName="ant-move-down"
+      transitionName="animation-move-down"
      styles={{
        content: {
          padding: 0,
--- a/src/renderer/src/pages/settings/MCPSettings/EditMcpJsonPopup.tsx
+++ b/src/renderer/src/pages/settings/MCPSettings/EditMcpJsonPopup.tsx
@ -111,7 +111,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
      width={800}
      height="80vh"
      loading={jsonSaving}
-      transitionName="ant-move-down"
+      transitionName="animation-move-down"
      centered>
      <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 16 }}>
        <Typography.Text type="secondary">
--- a/src/renderer/src/pages/settings/ModelSettings/TopicNamingModalPopup.tsx
+++ b/src/renderer/src/pages/settings/ModelSettings/TopicNamingModalPopup.tsx
@ -43,7 +43,7 @@ const PopupContainer: React.FC<Props> = ({ resolve }) => {
      onOk={onOk}
      onCancel={onCancel}
      afterClose={onClose}
-      transitionName="ant-move-down"
+      transitionName="animation-move-down"
      footer={null}
      centered>
      <Divider style={{ margin: '10px 0' }} />
--- a/src/renderer/src/pages/settings/ProviderSettings/ProviderSettingsPopup.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/ProviderSettingsPopup.tsx
@ -42,7 +42,7 @@ const PopupContainer: React.FC<Props> = ({ resolve, ...props }) => {
      onOk={onOk}
      onCancel={onCancel}
      afterClose={onClose}
-      transitionName="ant-move-down"
+      transitionName="animation-move-down"
      centered>
      <Checkbox
        checked={isNotSupportArrayContent}
--- a/src/renderer/src/pages/settings/ProviderSettings/SelectProviderModelPopup.tsx
+++ b/src/renderer/src/pages/settings/ProviderSettings/SelectProviderModelPopup.tsx
@ -47,7 +47,7 @@ const PopupContainer: React.FC<Props> = ({ provider, resolve, reject }) => {
      onOk={onOk}
      onCancel={onCancel}
      afterClose={onClose}
-      transitionName="ant-move-down"
+      transitionName="animation-move-down"
      width={300}
      centered>
      <Select