@canlooks/can-ui 0.0.169 → 0.0.171

package/dist/cjs/components/transfer/transfer.style.d.ts

@@ -4,8 +4,8 @@ export declare const classes: {
     title: string;
     checkbox: string;
     list: string;
-    buttons: string;
     count: string;
+    buttons: string;
     panel: string;
 } & {
     root: string;

package/dist/cjs/components/transitionBase/transitionBase.js

@@ -25,10 +25,12 @@ exports.TransitionBase = (({ ref, component: Component = 'div', orientation = 'v
         }
     }
     const innerRef = (0, react_1.useRef)(null);
-    const initialized = (0, react_1.useRef)(false);
-    (0, react_1.useEffect)(() => {
-        initialized.current = true;
+    const firstOpenChanged = (0, react_1.useRef)(false);
+    (0, utils_1.useUpdateEffect)(() => {
+        firstOpenChanged.current = true;
     }, [props.in]);
-    const unInitClass = !initialized.current && !props.in && 'exit-done';
-    return ((0, jsx_runtime_1.jsx)(react_transition_group_1.CSSTransition, { ...props, css: cssArr, nodeRef: innerRef, className: (0, utils_1.clsx)(transitionBase_style_1.classes.root, props.className, unInitClass), timeout: timeout, appear: appear, children: (0, jsx_runtime_1.jsx)(Component, { ref: (0, utils_1.cloneRef)(ref, innerRef), children: props.children }) }));
+    (0, react_1.useLayoutEffect)(() => {
+        !firstOpenChanged.current && !props.in && innerRef.current?.classList.add('exit-done');
+    }, [props.in]);
+    return ((0, jsx_runtime_1.jsx)(react_transition_group_1.CSSTransition, { ...props, css: cssArr, className: (0, utils_1.clsx)(transitionBase_style_1.classes.root, props.className), nodeRef: innerRef, timeout: timeout, appear: appear, children: (0, jsx_runtime_1.jsx)(Component, { ref: (0, utils_1.cloneRef)(ref, innerRef), children: props.children }) }));
 });

package/dist/cjs/components/transitionBase/transitionBase.style.js

@@ -30,6 +30,9 @@ function useTransitionBaseStyle({ timeout }) {
 }
 exports.fadeStyle = (0, utils_1.defineCss)(({ easing }) => (0, react_1.css) `
     @layer reset {
+        transition-property: opacity, transform, width, height;
+        transition-timing-function: ${easing.easeOut}, ${easing.bounce}, ${easing.bounce}, ${easing.bounce};
+        
         &.appear,
         &.exit,
         &.exit-done {
@@ -42,10 +45,7 @@ exports.fadeStyle = (0, utils_1.defineCss)(({ easing }) => (0, react_1.css) `
             opacity: 1;
         }
 
-        &.appear-active,
-        &.enter-active,
-        &.exit-active {
-            transition-property: opacity;
+        &.exit {
             transition-timing-function: ${easing.easeOut};
         }
     }
@@ -76,12 +76,10 @@ function useGrowAndCollapseStyle({ orientation, _mode }) {
         : orientation === 'vertical'
             ? 'scaleY'
             : 'scaleX';
-    return (0, utils_1.useCss)(() => (0, react_1.css) `
+    return (0, utils_1.useCss)(({ easing }) => (0, react_1.css) `
         @layer reset {
             ${_mode === 'collapse' ? `transform-origin: ${orientation === 'vertical' ? 'top' : 'left'};` : ''}
 
-            transition-property: opacity, transform;
-
             &.appear,
             &.exit,
             &.exit-done {
@@ -93,12 +91,6 @@ function useGrowAndCollapseStyle({ orientation, _mode }) {
             &.enter-done {
                 transform: scale(1);
             }
-            
-            &.appear-active,
-            &.enter-active,
-            &.exit-active {
-                transition-property: opacity, transform;
-            }
         }
     `, [orientation, _mode]);
 }

package/dist/esm/components/transfer/transfer.style.d.ts

@@ -4,8 +4,8 @@ export declare const classes: {
     title: string;
     checkbox: string;
     list: string;
-    buttons: string;
     count: string;
+    buttons: string;
     panel: string;
 } & {
     root: string;

package/dist/esm/components/transitionBase/transitionBase.js

@@ -1,8 +1,8 @@
 import { jsx as _jsx } from "@emotion/react/jsx-runtime";
-import { useEffect, useRef } from 'react';
+import { useLayoutEffect, useRef } from 'react';
 import { CSSTransition } from 'react-transition-group';
 import { classes, fadeStyle, useGrowAndCollapseStyle, useSlideStyle, useSweepingStyle, useTransitionBaseStyle } from './transitionBase.style.js';
-import { clsx, cloneRef } from '../../utils/index.js';
+import { clsx, cloneRef, useUpdateEffect } from '../../utils/index.js';
 export const TransitionBase = (({ ref, component: Component = 'div', orientation = 'vertical', direction = 'down', offset = '100%', timeout = 300, appear = true, _mode, ...props }) => {
     const cssArr = [
         useTransitionBaseStyle({ timeout })
@@ -22,10 +22,12 @@ export const TransitionBase = (({ ref, component: Component = 'div', orientation
         }
     }
     const innerRef = useRef(null);
-    const initialized = useRef(false);
-    useEffect(() => {
-        initialized.current = true;
+    const firstOpenChanged = useRef(false);
+    useUpdateEffect(() => {
+        firstOpenChanged.current = true;
     }, [props.in]);
-    const unInitClass = !initialized.current && !props.in && 'exit-done';
-    return (_jsx(CSSTransition, { ...props, css: cssArr, nodeRef: innerRef, className: clsx(classes.root, props.className, unInitClass), timeout: timeout, appear: appear, children: _jsx(Component, { ref: cloneRef(ref, innerRef), children: props.children }) }));
+    useLayoutEffect(() => {
+        !firstOpenChanged.current && !props.in && innerRef.current?.classList.add('exit-done');
+    }, [props.in]);
+    return (_jsx(CSSTransition, { ...props, css: cssArr, className: clsx(classes.root, props.className), nodeRef: innerRef, timeout: timeout, appear: appear, children: _jsx(Component, { ref: cloneRef(ref, innerRef), children: props.children }) }));
 });

package/dist/esm/components/transitionBase/transitionBase.style.js

@@ -23,6 +23,9 @@ export function useTransitionBaseStyle({ timeout }) {
 }
 export const fadeStyle = defineCss(({ easing }) => css `
     @layer reset {
+        transition-property: opacity, transform, width, height;
+        transition-timing-function: ${easing.easeOut}, ${easing.bounce}, ${easing.bounce}, ${easing.bounce};
+        
         &.appear,
         &.exit,
         &.exit-done {
@@ -35,10 +38,7 @@ export const fadeStyle = defineCss(({ easing }) => css `
             opacity: 1;
         }
 
-        &.appear-active,
-        &.enter-active,
-        &.exit-active {
-            transition-property: opacity;
+        &.exit {
             transition-timing-function: ${easing.easeOut};
         }
     }
@@ -69,12 +69,10 @@ export function useGrowAndCollapseStyle({ orientation, _mode }) {
         : orientation === 'vertical'
             ? 'scaleY'
             : 'scaleX';
-    return useCss(() => css `
+    return useCss(({ easing }) => css `
         @layer reset {
             ${_mode === 'collapse' ? `transform-origin: ${orientation === 'vertical' ? 'top' : 'left'};` : ''}
 
-            transition-property: opacity, transform;
-
             &.appear,
             &.exit,
             &.exit-done {
@@ -86,12 +84,6 @@ export function useGrowAndCollapseStyle({ orientation, _mode }) {
             &.enter-done {
                 transform: scale(1);
             }
-            
-            &.appear-active,
-            &.enter-active,
-            &.exit-active {
-                transition-property: opacity, transform;
-            }
         }
     `, [orientation, _mode]);
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@canlooks/can-ui",
-  "version": "0.0.169",
+  "version": "0.0.171",
   "author": "C.CanLiang <canlooks@gmail.com>",
   "description": "My ui framework",
   "license": "MIT",