DaiQiangReal 3 gadi atpakaļ
vecāks
revīzija
691d47876d

+ 7 - 0
packages/semi-foundation/popover/animation.scss

@@ -0,0 +1,7 @@
+$animation_duration-popover-in: 0.1s;//popover-弹出动画-动画持续时间
+$animation_duration-popover-out: 0.1s;//popover-收起动画-动画持续时间
+
+
+$animation_function-popover-in: cubic-bezier(0.215, 0.61, 0.355, 1);//popover-弹出动画-动画插值函数
+$animation_function-popover-out: cubic-bezier(0.215, 0.61, 0.355, 1);//popover-收起动画-动画插值函数
+

+ 38 - 2
packages/semi-foundation/popover/popover.scss

@@ -1,9 +1,38 @@
 @import '../tooltip/variables.scss';
+@import "./animation.scss";
 @import './variables.scss';
 
 $module: #{$prefix}-popover;
 $module-icon: #{$module}-icon-arrow;
 
+
+@keyframes #{$module}-zoomIn {
+    from {
+        opacity: $motion-zoom_opacity-from;
+        transform: scale($motion-zoom_scale-from, $motion-zoom_scale-from);
+    }
+
+    50% {
+        opacity: $motion-zoom_opacity-to;
+    }
+}
+
+@keyframes #{$module}-zoomOut {
+    from {
+        opacity: $motion-zoom_opacity-to;
+    }
+
+    60% {
+        opacity: $motion-zoom_opacity-from;
+        transform: scale($motion-zoom_scale-from, $motion-zoom_scale-from);
+    }
+
+    to {
+        opacity: $motion-zoom_opacity-from;
+    }
+}
+
+
 .#{$module} {
 
     &-wrapper {
@@ -19,7 +48,7 @@ $module-icon: #{$module}-icon-arrow;
         // padding: $spacing-extra-tight $spacing-tight;
         @include font-size-regular;
         visibility: hidden;
-    
+
         &-show {
             visibility: visible;
         }
@@ -48,7 +77,14 @@ $module-icon: #{$module}-icon-arrow;
         padding: $spacing-popover_withArrow-padding;
         box-sizing: border-box;
     }
+    &-animation-show{
+        animation: #{$module}-zoomIn $animation_duration-popover-in $animation_function-popover-in;
+    }
+
+    &-animation-hide{
+        animation: #{$module}-zoomOut $animation_duration-popover-out $animation_function-popover-out;
+    }
 }
 
 @import '../tooltip/arrow.scss';
-@import "./rtl.scss";
+@import "./rtl.scss";

+ 4 - 4
packages/semi-foundation/tooltip/animation.scss

@@ -1,7 +1,7 @@
-$animation_duration-tooltip-zoomIn: 0.1s;//tooltip-弹出动画-动画持续时间
-$animation_duration-tooltip-zoomOut: 0.1s;//tooltip-收起动画-动画持续时间
+$animation_duration-tooltip-in: 0.1s;//tooltip-弹出动画-动画持续时间
+$animation_duration-tooltip-out: 0.1s;//tooltip-收起动画-动画持续时间
 
 
-$animation_function-tooltip-zoomIn: cubic-bezier(0.215, 0.61, 0.355, 1);//tooltip-弹出动画-动画插值函数
-$animation_function-tooltip-zoomOut: cubic-bezier(0.215, 0.61, 0.355, 1);//tooltip-收起动画-动画插值函数
+$animation_function-tooltip-in: cubic-bezier(0.215, 0.61, 0.355, 1);//tooltip-弹出动画-动画插值函数
+$animation_function-tooltip-out: cubic-bezier(0.215, 0.61, 0.355, 1);//tooltip-收起动画-动画插值函数
 

+ 2 - 2
packages/semi-foundation/tooltip/tooltip.scss

@@ -90,11 +90,11 @@ $module-icon: #{$module}-icon-arrow;
     }
 
     &-animation-show{
-        animation: #{$module}-zoomIn $animation_duration-tooltip-zoomIn $animation_function-tooltip-zoomIn;
+        animation: #{$module}-zoomIn $animation_duration-tooltip-in $animation_function-tooltip-in;
     }
 
     &-animation-hide{
-        animation: #{$module}-zoomOut $animation_duration-tooltip-zoomOut $animation_function-tooltip-zoomOut;
+        animation: #{$module}-zoomOut $animation_duration-tooltip-out $animation_function-tooltip-out;
     }
 
 }

+ 2 - 2
packages/semi-ui/_cssAnimation/index.tsx

@@ -49,7 +49,7 @@ class CSSAnimation extends React.Component<AnimationProps, AnimationState> {
     }
 
     handleAnimationStart = () => {
-        this.props.onAnimationStart();
+        this.props.onAnimationStart?.();
     }
 
 
@@ -58,7 +58,7 @@ class CSSAnimation extends React.Component<AnimationProps, AnimationState> {
             currentClassName: this.props.endClassName,
             extraStyle: {}
         }, ()=>{
-            this.props.onAnimationEnd();
+            this.props.onAnimationEnd?.();
         });
     }
 

+ 0 - 1
packages/semi-ui/tooltip/index.tsx

@@ -573,7 +573,6 @@ export default class Tooltip extends BaseComponent<TooltipProps, TooltipState> {
         const inner = motion && isPositionUpdated ? (
             <CSSAnimation animationState={transitionState as "enter"|"leave"}
                 startClassName={transitionState==='enter'?`${prefixCls}-animation-show`:`${prefixCls}-animation-hide`}
-                onAnimationStart={()=>{console.log('onAnimationStart');}}
                 onAnimationEnd={()=>{
                     if (transitionState === 'leave'){
                         this.didLeave();

+ 70 - 0
yarn.lock

@@ -1445,6 +1445,15 @@
   resolved "https://registry.yarnpkg.com/@discoveryjs/json-ext/-/json-ext-0.5.7.tgz#1d572bfbbe14b7704e0ba0f39b74815b84870d70"
   integrity sha512-dBVuXR082gk3jsFp7Rd/JI4kytwGHecnCoTtXFb7DB6CNHp4rg5k1bhg0nWdLGLnOV71lmDzGQaLMy8iPLY0pw==
 
+"@douyinfe/[email protected]":
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/@douyinfe/semi-animation-react/-/semi-animation-react-2.19.0.tgz#182c6786fc1f9b2f44bc5f2440f363e14fba18e1"
+  integrity sha512-y/TX1laLv5BtTt2a1dYt/S3k8XeRn0tlOY63f/VZGrK0NA8krt6/HmA/V1sHY5wFhRsXTg18dhRukgLY+pnXKg==
+  dependencies:
+    "@douyinfe/semi-animation" "2.12.0"
+    "@douyinfe/semi-animation-styled" "2.19.0"
+    classnames "^2.2.6"
+
 "@douyinfe/[email protected]":
   version "2.9.1"
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-animation-react/-/semi-animation-react-2.9.1.tgz#f2e4c6ef7899729ee6145edf0579598ba195bfdd"
@@ -1455,6 +1464,13 @@
     "@douyinfe/semi-animation-styled" "2.9.1"
     classnames "^2.2.6"
 
+"@douyinfe/[email protected]":
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/@douyinfe/semi-animation-styled/-/semi-animation-styled-2.19.0.tgz#9e78fccf1bb5b523af213021c2dcb5a6889c098c"
+  integrity sha512-9m28W9rzzwHesNmnubvwi+SQOSpFwwx0y7+2HVYJCjYaoz8JmbqlPWWsRbwLFfGEndLXtrCDHatVrcXgUq7Hpg==
+  dependencies:
+    "@babel/runtime-corejs3" "^7.15.4"
+
 "@douyinfe/[email protected]":
   version "2.9.1"
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-animation-styled/-/semi-animation-styled-2.9.1.tgz#0a4a3c521626118b209604b2d6447fbcaa4839a4"
@@ -1478,6 +1494,20 @@
     "@babel/runtime-corejs3" "^7.15.4"
     bezier-easing "^2.1.0"
 
+"@douyinfe/[email protected]":
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/@douyinfe/semi-foundation/-/semi-foundation-2.19.0.tgz#3a9bb1eb6511982c015078acd4ef14c1cd8704ce"
+  integrity sha512-aJ0WWqGjEj7yIgk7+Y2aTaAfwOKgybpEEEZAHPtEgpnBTrwDQ/qJ8IQSqRypNuE6/gRE3+fvUXdzRDvL/7IYxg==
+  dependencies:
+    "@douyinfe/semi-animation" "2.12.0"
+    async-validator "^3.5.0"
+    classnames "^2.2.6"
+    date-fns "^2.9.0"
+    date-fns-tz "^1.0.10"
+    lodash "^4.17.21"
+    memoize-one "^5.2.1"
+    scroll-into-view-if-needed "^2.2.24"
+
 "@douyinfe/[email protected]":
   version "2.9.1"
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-foundation/-/semi-foundation-2.9.1.tgz#1300bb97d6ceb92274ca4c9e6c66c5c16dc284ea"
@@ -1493,6 +1523,14 @@
     memoize-one "^5.2.1"
     scroll-into-view-if-needed "^2.2.24"
 
+"@douyinfe/[email protected]", "@douyinfe/semi-icons@^2.0.0":
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/@douyinfe/semi-icons/-/semi-icons-2.19.0.tgz#a12ad9fd5572f832a41bb39978ff68021b7a0208"
+  integrity sha512-ixqK/Xt5hvEQt+g1ou09+Qw5DOh0pGorcCWpWswSiyW6PbEg8gpn3a/VOkYFQUvK9K9r32Zcasr+iavGIaEsEQ==
+  dependencies:
+    "@babel/runtime-corejs3" "^7.15.4"
+    classnames "^2.2.6"
+
 "@douyinfe/[email protected]", "@douyinfe/semi-icons@latest":
   version "2.9.1"
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-icons/-/semi-icons-2.9.1.tgz#7a04e1a77070220b04f63e6f65aac30155ed8ddd"
@@ -1571,6 +1609,13 @@
     monaco-themes "^0.3.3"
     react-live "^2.2.2"
 
+"@douyinfe/[email protected]":
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/@douyinfe/semi-theme-default/-/semi-theme-default-2.19.0.tgz#c88e874df91538518d90308c0ecca988e39ed78a"
+  integrity sha512-WZrUg3RNpxIITx2zLSJgVK8ovkCD7+P34yDIivOYryOzSplP2equcfI9TqjMOM+qh6LPheRDwDVeZVryoOCFtA==
+  dependencies:
+    glob "^7.1.6"
+
 "@douyinfe/[email protected]":
   version "2.9.1"
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-theme-default/-/semi-theme-default-2.9.1.tgz#734113e9783ca58b69afe1769005e7e57e5a4da7"
@@ -1578,6 +1623,31 @@
   dependencies:
     glob "^7.1.6"
 
+"@douyinfe/semi-ui@^2.0.0":
+  version "2.19.0"
+  resolved "https://registry.yarnpkg.com/@douyinfe/semi-ui/-/semi-ui-2.19.0.tgz#95e892cabf08babb7451e670594a550de62ca181"
+  integrity sha512-zBxfkpcQoa9A+QVDiCHDLszWS1iCeWu2lSX5zW7XH+7XKEe/9pp9o7WdYnLyZmt2dmFSLLDvrPlCs3s4PT8FHg==
+  dependencies:
+    "@douyinfe/semi-animation" "2.12.0"
+    "@douyinfe/semi-animation-react" "2.19.0"
+    "@douyinfe/semi-foundation" "2.19.0"
+    "@douyinfe/semi-icons" "2.19.0"
+    "@douyinfe/semi-illustrations" "2.15.0"
+    "@douyinfe/semi-theme-default" "2.19.0"
+    async-validator "^3.5.0"
+    classnames "^2.2.6"
+    copy-text-to-clipboard "^2.1.1"
+    date-fns "^2.9.0"
+    date-fns-tz "^1.0.10"
+    lodash "^4.17.21"
+    prop-types "^15.7.2"
+    react-resizable "^1.8.0"
+    react-sortable-hoc "^2.0.0"
+    react-window "^1.8.2"
+    resize-observer-polyfill "^1.5.1"
+    scroll-into-view-if-needed "^2.2.24"
+    utility-types "^3.10.0"
+
 "@douyinfe/semi-ui@latest":
   version "2.9.1"
   resolved "https://registry.yarnpkg.com/@douyinfe/semi-ui/-/semi-ui-2.9.1.tgz#505d4783ea1fa73d307b75f62091030f1fee9332"