chore:backup

packages/semi-foundation/notification/animation.scss

@@ -0,0 +1,12 @@
+$animation_duration-notification-show: 300ms; // 出现时-动画持续时间
+$animation_function-notification-show: cubic-bezier(0.62, 0.63, 0, 1.13); // 出现时-过渡曲线
+$animation_delay-notification-show: 0ms; // 出现时-延迟时间
+
+$animation_duration-notification-hide: 300ms; // 消失时-动画持续时间
+$animation_function-notification-hide: cubic-bezier(0.62, 0.63, 0, 1.13); //消失时-过渡曲线
+$animation_delay-notification-hide: 0ms; // 消失时-延迟时间
+
+
+$animation_opacity-notification-show: 0; // 出现时-初始透明度
+$animation_opacity-notification-hide: 0; // 消失时-结束透明度
+

packages/semi-foundation/notification/notification.scss

@@ -1,4 +1,4 @@
-//@import '../theme/variables.scss';
+@import "./animation.scss";
 @import './variables.scss';
 
 $module: #{$prefix}-notification;
@@ -46,6 +46,7 @@ $module: #{$prefix}-notification;
         bottom: 0;
         left: 0;
     }
+
 }
 
 .#{$module} {
@@ -165,6 +166,187 @@ $module: #{$prefix}-notification;
             text-align: center;
             flex-grow: 1;
         }
+
+        @keyframes #{$module}-slideShow_top {
+            from {
+                opacity: $animation_opacity-notification-show;
+                transform: translateY(-100%);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        @keyframes #{$module}-slideHide_top {
+            from {
+                opacity: 1;
+                transform: translateY(0);
+            }
+            to {
+                opacity: $animation_opacity-notification-hide;
+                transform: translateY(-100%);
+            }
+        }
+
+        @keyframes #{$module}-slideShow_topLeft {
+            from {
+                opacity: $animation_opacity-notification-show;
+                transform: translateX(-100%);
+            }
+            to {
+                opacity: 1;
+                transform: translateX(0);
+            }
+        }
+
+        @keyframes #{$module}-slideHide_topLeft {
+            from {
+                opacity: 1;
+                transform: translateX(0);
+            }
+            to {
+                opacity: $animation_opacity-notification-hide;
+                transform: translateX(-100%);
+            }
+        }
+
+        @keyframes #{$module}-slideShow_topRight {
+            from {
+                opacity: $animation_opacity-notification-show;
+                transform: translateX(100%);
+            }
+            to {
+                opacity: 1;
+                transform: translateX(0);
+            }
+        }
+
+        @keyframes #{$module}-slideHide_topRight {
+            from {
+                opacity: 1;
+                transform: translateX(0);
+            }
+            to {
+                opacity: $animation_opacity-notification-hide;
+                transform: translateX(100%);
+            }
+        }
+
+        @keyframes #{$module}-slideShow_bottom {
+            from {
+                opacity: $animation_opacity-notification-show;
+                transform: translateY(100%);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        @keyframes #{$module}-slideHide_bottom {
+            from {
+                opacity: 1;
+                transform: translateY(0);
+            }
+            to {
+                opacity: $animation_opacity-notification-hide;
+                transform: translateY(100%);
+            }
+        }
+
+        @keyframes #{$module}-slideShow_bottomLeft {
+            from {
+                opacity: $animation_opacity-notification-show;
+                transform: translateX(-100%);
+            }
+            to {
+                opacity: 1;
+                transform: translateX(0);
+            }
+        }
+
+        @keyframes #{$module}-slideHide_bottomLeft {
+            from {
+                opacity: 1;
+                transform: translateX(0);
+            }
+            to {
+                opacity: $animation_opacity-notification-hide;
+                transform: translateX(-100%);
+            }
+        }
+
+        @keyframes #{$module}-slideShow_bottomRight {
+            from {
+                opacity: $animation_opacity-notification-show;
+                transform: translateX(100%);
+            }
+            to {
+                opacity: 1;
+                transform: translateX(0);
+            }
+        }
+
+        @keyframes #{$module}-slideHide_bottomRight {
+            from {
+                opacity: 1;
+                transform: translateX(0);
+            }
+            to {
+                opacity: $animation_opacity-notification-hide;
+                transform: translateX(100%);
+            }
+        }
+
+  
+
+        &-animation-show_top{
+            animation: #{$module}-slideShow_top $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+        }
+
+        &-animation-hide_top{
+            animation: #{$module}-slideHide_top $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+        }
+
+        &-animation-show_topLeft{
+            animation: #{$module}-slideShow_topLeft $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+        }
+
+        &-animation-hide_topLeft{
+            animation: #{$module}-slideHide_topLeft $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+        }
+
+        &-animation-show_topRight{
+            animation: #{$module}-slideShow_topRight $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+        }
+
+        &-animation-hide_topRight{
+            animation: #{$module}-slideHide_topRight $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+        }
+
+        &-animation-show_bottom{
+            animation: #{$module}-slideShow_bottom $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+        }
+
+        &-animation-hide_bottom{
+            animation: #{$module}-slideHide_bottom $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+        }
+
+        &-animation-show_bottomLeft{
+            animation: #{$module}-slideShow_bottomLeft $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+        }
+
+        &-animation-hide_bottomLeft{
+            animation: #{$module}-slideHide_bottomLeft $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+        }
+        &-animation-show_bottomRight{
+            animation: #{$module}-slideShow_bottomRight $animation_duration-notification-show $animation_function-notification-show $animation_delay-notification-show;
+        }
+
+        &-animation-hide_bottomRight{
+            animation: #{$module}-slideHide_bottomRight $animation_duration-notification-hide $animation_function-notification-hide $animation_delay-notification-hide;
+        }
     }
 }
 

packages/semi-foundation/sideSheet/sideSheet.scss

@@ -134,13 +134,13 @@ $module: #{$prefix}-sidesheet;
             transform: translateY(-100%);
         }
         to {
-            transform: translateX(0);
+            transform: translateY(0);
         }
     }
 
     @keyframes #{$module}-slideHide_top {
         from {
-            transform: translateX(0);
+            transform: translateY(0);
         }
         to {
             transform: translateY(-100%);
@@ -152,13 +152,13 @@ $module: #{$prefix}-sidesheet;
             transform: translateY(100%);
         }
         to {
-            transform: translateX(0);
+            transform: translateY(0);
         }
     }
 
     @keyframes #{$module}-slideHide_bottom {
         from {
-            transform: translateX(0);
+            transform: translateY(0);
         }
         to {
             transform: translateY(100%);
@@ -219,7 +219,6 @@ $module: #{$prefix}-sidesheet;
         to {
             opacity: 0;
         }
-
     }
 
 

packages/semi-foundation/toast/animation.scss

@@ -1,7 +1,7 @@
 $animation_duration-toast-show: 300ms;
 $animation_duration-toast-hide: 300ms;
-$animation_function-toast-show: ease-in-out;
-$animation_function-toast-hide: ease-in-out;
+$animation_function-toast-show: cubic-bezier(.22,.57,.02,1.2);
+$animation_function-toast-hide: cubic-bezier(.22,.57,.02,1.2);
 $animation_delay-toast-show: 0s;
 $animation_delay-toast-hide: 0s;
 

packages/semi-foundation/toast/toast.scss

@@ -89,11 +89,11 @@ $icon: #{$prefix}-toast-icon;
     }
 
     &-animation-show{
-        animation:  $animation_duration-toast-show #{$module}-keyframe-toast-show $animation_delay-toast-show ease-in-out;
+        animation: $animation_duration-toast-show #{$module}-keyframe-toast-show $animation_function-toast-show $animation_delay-toast-show ;
     }
 
     &-animation-hide{
-        animation: $animation_duration-toast-hide #{$module}-keyframe-toast-hide $animation_delay-toast-hide ease-in-out;
+        animation: $animation_duration-toast-hide #{$module}-keyframe-toast-hide $animation_function-toast-hide $animation_delay-toast-hide ;
     }
 
     @keyframes #{$module}-keyframe-toast-show{

packages/semi-ui/notification/NoticeTransition.tsx

@@ -1,68 +0,0 @@
-// @ts-ignore  Currently there is no types for semi-animation-react
-import { Transition } from '@douyinfe/semi-animation-react';
-import React, { CSSProperties, JSXElementConstructor } from 'react';
-import { NoticePosition } from '@douyinfe/semi-foundation/notification/notificationFoundation';
-import { Motion } from '../_base/base';
-
-export type ArgsType<T> = T extends (...args: infer A) => any ? A : never;
-
-export interface NoticeTransitionProps{
-    position?: NoticePosition;
-    motion?: Motion<NoticeTransitionProps>;
-    children?: React.ReactNode | ((TransitionProps?: any) => React.ReactNode);
-}
-
-type NoticeTransitionFormatFuncType = (styles: { translate: string;opacity: string | number }) => any;
-
-export default function NoticeTransition(props: NoticeTransitionProps = {}) {
-    let { motion = {} } = props;
-    const { position = 'topRight' } = props;
-
-    const formatStyle = function formatStyle({ translate, opacity }: ArgsType<NoticeTransitionFormatFuncType>[0]) {
-        let transform = `translateX(${translate}%)`;
-
-        if (position && typeof position === 'string') {
-            if (/left/i.test(position)) {
-                transform = `translateX(${-translate}%)`;
-            } else if (/right/i.test(position)) {
-                transform = `translateX(${translate}%)`;
-            } else if (/top/i.test(position)) {
-                transform = `translateY(${-translate}%)`;
-            } else {
-                transform = `translateY(${translate}%)`;
-            }
-        }
-
-        return {
-            transform,
-            opacity,
-        };
-    };
-
-    if (typeof motion === 'function') {
-        motion = motion(props);
-    } else if (!motion || typeof motion !== 'object') {
-        motion = {};
-    }
-
-    return (
-        <Transition
-            // onFrame={style => console.log(formatStyle(style))}
-            from={{ translate: 100, opacity: 0 }}
-            enter={{ translate: { val: 0, tension: 560, friction: 32 }, opacity: { val: 1, duration: 200 } } as any}
-            leave={{
-                translate: { val: 100, easing: 'easeOutCubic', duration: 300 },
-                opacity: { val: 0, duration: 200 },
-            } as any}
-            {...motion}
-        >
-            {typeof props.children === 'function' ?
-                (transitionStyle: ArgsType<NoticeTransitionFormatFuncType>[0]) =>
-                    (props.children as ({ transform, opacity }:
-                    { transform: CSSProperties['transform'];opacity: number | string }) => any)(
-                        formatStyle(transitionStyle)
-                    ) :
-                props.children}
-        </Transition>
-    );
-}

packages/semi-ui/notification/index.tsx

@@ -12,13 +12,12 @@ import { cssClasses, strings } from '@douyinfe/semi-foundation/notification/cons
 import Notice from './notice';
 import BaseComponent from '../_base/baseComponent';
 import '@douyinfe/semi-foundation/notification/notification.scss';
-import NoticeTransition from './NoticeTransition';
 import getUuid from '@douyinfe/semi-foundation/utils/uuid';
 import useNotification from './useNotification';
 import { NoticeInstance, NoticePosition, NoticeProps, NoticeState } from '@douyinfe/semi-foundation/notification/notificationFoundation';
+import CSSAnimation from "../_cssAnimation";
 // TODO: Automatic folding + unfolding function when there are more than N
 
-export type { NoticeTransitionProps } from './NoticeTransition';
 export interface NoticeReactProps extends NoticeProps{
     style?: CSSProperties;
 }
@@ -197,23 +196,41 @@ class NotificationList extends BaseComponent<NotificationListProps, Notification
             return (
                 // @ts-ignore
                 <div placement={position} key={position} className={className} style={style}>
-                    {notices.map((notice, index) =>
-                        (notice.motion ? (
-                            <NoticeTransition key={notice.id || index} position={position} motion={notice.motion}>
-                                {removedItems.find(item => item.id === notice.id) ?
-                                    null :
-                                    transitionStyle => (
-                                        <Notice
-                                            {...notice}
-                                            style={{ ...transitionStyle, ...notice.style }}
-                                            key={notice.id}
-                                            close={this.remove}
-                                        />
-                                    )}
-                            </NoticeTransition>
-                        ) : (
-                            <Notice {...notice} style={{ ...notice.style }} key={notice.id} close={this.remove} />
-                        ))
+                    {notices.map((notice, index) =>{
+                            const isRemoved = removedItems.find(removedItem=>removedItem===notice.id) !== undefined;
+                        return <CSSAnimation  key={notice.id}
+                                              animationState={isRemoved?"leave":"enter"}
+                                              startClassName={`${cssClasses.NOTICE}-animation-${isRemoved?"hide":"show"}_${position}`}>
+                            {({animationClassName,animationEventsNeedBind,isAnimating})=>{
+                                return isRemoved && !isAnimating ? null : <Notice
+                                    {...notice}
+                                    className={cls({
+                                        [notice.className]:Boolean(notice.className),
+                                        [animationClassName]:true,
+                                    })}
+                                    {...animationEventsNeedBind}
+                                    style={{...notice.style}}
+                                    close={this.remove}
+                                />
+                            }}
+                        </CSSAnimation>
+                    }
+                        // (notice.motion ? (
+                        //     <NoticeTransition key={notice.id || index} position={position} motion={notice.motion}>
+                        //         {removedItems.find(item => item.id === notice.id) ?
+                        //             null :
+                        //             transitionStyle => (
+                        //                 <Notice
+                        //                     {...notice}
+                        //                     style={{ ...transitionStyle, ...notice.style }}
+                        //                     key={notice.id}
+                        //                     close={this.remove}
+                        //                 />
+                        //             )}
+                        //     </NoticeTransition>
+                        // ) : (
+                        //     <Notice {...notice} style={{ ...notice.style }} key={notice.id} close={this.remove} />
+                        // ))
                     )}
                 </div>
             );

packages/semi-ui/notification/notice.tsx

@@ -22,6 +22,8 @@ export interface NoticeReactProps extends NoticeProps {
     content?: React.ReactNode;
     icon?: React.ReactNode;
     onClick?: (e: React.MouseEvent) => void;
+    onAnimationEnd?: (e: React.AnimationEvent) => void;
+    onAnimationStart?: (e: React.AnimationEvent) => void;
 }
 
 const prefixCls = cssClasses.NOTICE;
@@ -166,6 +168,8 @@ class Notice extends BaseComponent<NoticeReactProps, NoticeState> {
                 onClick={this.notifyClick}
                 aria-labelledby={titleID}
                 role={'alert'}
+                onAnimationEnd={this.props.onAnimationEnd}
+                onAnimationStart={this.props.onAnimationStart}
             >
                 <div>{this.renderTypeIcon()}</div>
                 <div className={`${prefixCls}-inner`}>

packages/semi-ui/toast/index.tsx

@@ -221,7 +221,7 @@ const createBaseToast = () => class ToastList extends BaseComponent<ToastListPro
         return (
             <React.Fragment>
                 {list.map((item, index) =>{
-                    const isRemoved = removedItems.includes(item);
+                    const isRemoved = removedItems.find(removedItem=>removedItem===item) !== undefined;
                     return <CSSAnimation key={item.id} motion={item.motion} animationState={isRemoved?"leave":"enter"} startClassName={isRemoved?`${cssClasses.PREFIX}-animation-hide`:`${cssClasses.PREFIX}-animation-show`}>
                         {
                             ({animationClassName,animationEventsNeedBind,isAnimating})=>{