iamyoki / transition-hook Goto Github PK

☄️ An extremely light-weight react transition animation hook which is simpler and easier to use than react-transition-group

Home Page: https://github.com/iamyoki/transition-hook#%EF%B8%8F-transition-hook

License: MIT License

Shell 0.81% JavaScript 13.87% TypeScript 85.31%

react hooks transition-hook animation css react-transition-group hook react-spring animation-library

transition-hook's People

Contributors

Stargazers

Watchers

Forkers

liu-zhi-fei subhanbakh codcer big-bear-2019 twotwoba aolef stunext shervinchen gy-coder csantos1113 jinly2 fxf111 anhgeeky vanyapr ateich anderustarroz

transition-hook's Issues

About `useSwitchTransition` How to watch Animate end?

How to clear children style On anmiated after !

        {
                transition((_, stage: Stage) => (
                    <div
                        style={{
                            transition: '.22s',
                            opacity: stage === 'enter' ? 1 : 0,
                            transform: transformFromType?.[stage],
                            position: 'absolute',
                            width: width, 
                            height: height,
                            left: 0,
                            right: 0,
                            margin: 'auto',
                        }}
                    >
                        <Outlet />
                    </div>
                ))}

Update dependencies to React v18.x

The library is great but currently it seems to rely on the following dependencies:

    "react": "^16.8.0  || ^17.0.0",
    "react-dom": "^16.8.0  || ^17.0.0"

@iamyoki Could you upgrade dependencies so it also supports React v18? It works out the box but just need to add:

    "react": "^16.8.0  || ^17.0.0  || ^18.0.0",
    "react-dom": "^16.8.0  || ^17.0.0  || ^18.0.0"

🌟 feat: add useTransitionGroup hook

Draft of use case

export function App() {
  const [list, setList] = useState([1, 2, 3])
  const transitionGroup = useTransitionGroup(list, {timeout: 300})

  return (
    <div>
      {transitionGroup((item, stage) => (
        <h1 style={...}>{item}</h1>
      ))}
    </div>
  )
}

Custom state key for switch transition

Hi and thanks for this lib!

I have a question, where would I look in order to support using a certain key on the state that, when changed should trigger a transition?

The reason is that the state object might change but if it's e.g. object.id is the same, it shouldn't transition.

I would be happy to look in to the source code, but it you know straight away where to look to implement this, I'd be happy :)

🌟 feat: add useSwitchTransition hook

This hook will trigger the entry of the current animation and the exit of the previous animation according to the state change.

Previews:

🌟 feat: add SwitchTransition component

use npm install transition-hook in react@18, occur version error

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: [email protected]
npm ERR! Found: [email protected]
npm ERR! node_modules/react
npm ERR! react@"^18.0.0" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^16.8.0 || ^17.0.0" from [email protected]
npm ERR! node_modules/transition-hook
npm ERR! transition-hook@"^1.5.2" from the root project
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!

🌟 feat: add ListTransition component

Draft use case

function App() {
  const [list, setList] = useState([1,2,3])

  return <div className="App">
    <button onClick={()=>setList(prev=>[...prev, prev.length+1])}>Add Item</button>
    <ListTransition list={list}>
      {(item, stage)=><h1 style={...}>{item}</h1>}
    </ListTransition>
  </div>
}

不支持react18嘛

有点可惜呀今天用react- transition- group 的时候没有动画效果想试试你的

ListTransition keyRef 会重复吗

transition-hook/src/useListTransition/index.tsx

Line 25 in 12a1646

key: keyRef.current,

比如传入的list 是 [1, 2, 3,] 初始的key 不会重复吗~~ 作者大大

关于组件没有卸载时导致的leave不执行问题

应该重新设计这个 api 的状态转换机制，以下是我的实现

新增 'start' Stage, 默认初始化 stage 为 'start'。

添加这样的状态转换：

true: start -> from -> enter
false: start -> from
true: from -> enter
false: from -> from
true: enter -> enter
false: enter -> leave
true: leave -> from -> enter
false: leave -> from

以下是伪代码：

if (state) {
  if (stage === 'start‘） {
    stage = 'from';
    await someTime();
    stage = 'enter';
  } else if (stage === 'from') {
    stage = 'enter';
  } else if (stage === 'leave') {
    stage = 'from';
    await someTime(); // 让 'from' stage成功挂载之后，再挂载 'enter'
    stage = 'enter';
  }
} else {
  if (stage === 'starg') {
    stage = 'from';
  } else if (stage === 'enter') {
    stage = 'leave';
  } else if (stage === 'leave') {
    await someTime();
    stage = 'from';
  }
}

Source map warning in CRA - Failed to parse source map from...

Description

Works fine, but shows warning message about sourceMap in cli console

WARNING in ./node_modules/transition-hook/dist/esm/ListTransition/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/yoki/try-th/node_modules/transition-hook/src/ListTransition/index.tsx' file: Error: ENOENT: no such file or directory, open '/Users/yoki/try-th/node_modules/transition-hook/src/ListTransition/index.tsx'
 @ ./node_modules/transition-hook/dist/esm/index.js 6:0-33 6:0-33
 @ ./src/App.jsx 8:0-48 14:13-26 63:10-23
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/transition-hook/dist/esm/SwitchTransition/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/yoki/try-th/node_modules/transition-hook/src/SwitchTransition/index.tsx' file: Error: ENOENT: no such file or directory, open '/Users/yoki/try-th/node_modules/transition-hook/src/SwitchTransition/index.tsx'
 @ ./node_modules/transition-hook/dist/esm/index.js 5:0-35 5:0-35
 @ ./src/App.jsx 8:0-48 14:13-26 63:10-23
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/transition-hook/dist/esm/Transition/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/yoki/try-th/node_modules/transition-hook/src/Transition/index.tsx' file: Error: ENOENT: no such file or directory, open '/Users/yoki/try-th/node_modules/transition-hook/src/Transition/index.tsx'
 @ ./node_modules/transition-hook/dist/esm/index.js 4:0-29 4:0-29
 @ ./src/App.jsx 8:0-48 14:13-26 63:10-23
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/transition-hook/dist/esm/helpers/insertArray.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/yoki/try-th/node_modules/transition-hook/src/helpers/insertArray.ts' file: Error: ENOENT: no such file or directory, open '/Users/yoki/try-th/node_modules/transition-hook/src/helpers/insertArray.ts'
 @ ./node_modules/transition-hook/dist/esm/useListTransition/index.js 3:0-53 32:15-26
 @ ./node_modules/transition-hook/dist/esm/index.js 3:0-36 3:0-36
 @ ./src/App.jsx 8:0-48 14:13-26 63:10-23
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/transition-hook/dist/esm/helpers/setAnimationFrameTimeout.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/yoki/try-th/node_modules/transition-hook/src/helpers/setAnimationFrameTimeout.ts' file: Error: ENOENT: no such file or directory, open '/Users/yoki/try-th/node_modules/transition-hook/src/helpers/setAnimationFrameTimeout.ts'
 @ ./node_modules/transition-hook/dist/esm/useTransition/index.js 2:0-107 10:4-30 16:6-30 21:22-46 27:6-32
 @ ./node_modules/transition-hook/dist/esm/index.js 1:0-32 1:0-32
 @ ./src/App.jsx 8:0-48 14:13-26 63:10-23
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/transition-hook/dist/esm/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/yoki/try-th/node_modules/transition-hook/src/index.ts' file: Error: ENOENT: no such file or directory, open '/Users/yoki/try-th/node_modules/transition-hook/src/index.ts'
 @ ./src/App.jsx 8:0-48 14:13-26 63:10-23
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/transition-hook/dist/esm/useListTransition/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/yoki/try-th/node_modules/transition-hook/src/useListTransition/index.tsx' file: Error: ENOENT: no such file or directory, open '/Users/yoki/try-th/node_modules/transition-hook/src/useListTransition/index.tsx'
 @ ./node_modules/transition-hook/dist/esm/index.js 3:0-36 3:0-36
 @ ./src/App.jsx 8:0-48 14:13-26 63:10-23
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/transition-hook/dist/esm/useSwitchTransition/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/yoki/try-th/node_modules/transition-hook/src/useSwitchTransition/index.tsx' file: Error: ENOENT: no such file or directory, open '/Users/yoki/try-th/node_modules/transition-hook/src/useSwitchTransition/index.tsx'
 @ ./node_modules/transition-hook/dist/esm/index.js 2:0-38 2:0-38
 @ ./src/App.jsx 8:0-48 14:13-26 63:10-23
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/transition-hook/dist/esm/useSwitchTransition/useDefaultMode.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/yoki/try-th/node_modules/transition-hook/src/useSwitchTransition/useDefaultMode.ts' file: Error: ENOENT: no such file or directory, open '/Users/yoki/try-th/node_modules/transition-hook/src/useSwitchTransition/useDefaultMode.ts'
 @ ./node_modules/transition-hook/dist/esm/useSwitchTransition/index.js 3:0-50 15:2-16
 @ ./node_modules/transition-hook/dist/esm/index.js 2:0-38 2:0-38
 @ ./src/App.jsx 8:0-48 14:13-26 63:10-23
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/transition-hook/dist/esm/useSwitchTransition/useInOutMode.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/yoki/try-th/node_modules/transition-hook/src/useSwitchTransition/useInOutMode.ts' file: Error: ENOENT: no such file or directory, open '/Users/yoki/try-th/node_modules/transition-hook/src/useSwitchTransition/useInOutMode.ts'
 @ ./node_modules/transition-hook/dist/esm/useSwitchTransition/index.js 4:0-46 33:2-14
 @ ./node_modules/transition-hook/dist/esm/index.js 2:0-38 2:0-38
 @ ./src/App.jsx 8:0-48 14:13-26 63:10-23
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/transition-hook/dist/esm/useSwitchTransition/useOutInMode.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/yoki/try-th/node_modules/transition-hook/src/useSwitchTransition/useOutInMode.ts' file: Error: ENOENT: no such file or directory, open '/Users/yoki/try-th/node_modules/transition-hook/src/useSwitchTransition/useOutInMode.ts'
 @ ./node_modules/transition-hook/dist/esm/useSwitchTransition/index.js 5:0-46 24:2-14
 @ ./node_modules/transition-hook/dist/esm/index.js 2:0-38 2:0-38
 @ ./src/App.jsx 8:0-48 14:13-26 63:10-23
 @ ./src/index.js 7:0-24 11:33-36

WARNING in ./node_modules/transition-hook/dist/esm/useTransition/index.js
Module Warning (from ./node_modules/source-map-loader/dist/cjs.js):
Failed to parse source map from '/Users/yoki/try-th/node_modules/transition-hook/src/useTransition/index.ts' file: Error: ENOENT: no such file or directory, open '/Users/yoki/try-th/node_modules/transition-hook/src/useTransition/index.ts'
 @ ./node_modules/transition-hook/dist/esm/index.js 1:0-32 1:0-32
 @ ./src/App.jsx 8:0-48 14:13-26 63:10-23
 @ ./src/index.js 7:0-24 11:33-36

Reproduce

Create a project using CRA
Install transition-hook
Start the project yarn start

动画显示不完全

react 18.2 只有enter到leave的动画没有from到enter的动画新手望指点

import { Button } from "antd";
import { useSwitchTransition } from "transition-hook";


export default function Test() {
  const [count, setCount] = useState(0);
  const transition = useSwitchTransition(count, 300, "default");

  return (
    <div className="BasicSwitchTransition">
      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          gap: 40,
          marginTop: 50,
        }}
      >
        <Button onClick={() => setCount(count - 1)}>-1</Button>
        <div
          style={{
            width: 150,
            display: "grid",
            placeItems: "center",
            perspective: 200,
          }}
        >
          {transition((state, stage) => (
            <h1
              style={{
                fontSize: "5em",
                position: "absolute",
                transition: ".3s",
                opacity: stage === "enter" ? 1 : 0,
                transform: {
                  from: "translateY(-100%) rotateX(60deg) scale(.5)",
                  enter: "translateY(0%)",
                  leave: "translateY(100%) rotateX(-60deg) scale(.5)",
                }[stage],
              }}
            >
              {state}
            </h1>
          ))}
        </div>
        <Button onClick={() => setCount(count + 1)}>+1</Button>
      </div>

      <div
        style={{
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          flexDirection: "column",
          gap: 40,
          marginTop: 100,
        }}
      >
        <Button onClick={() => setCount(count - 1)}>-1</Button>
        <div
          style={{
            width: 150,
            display: "grid",
            placeItems: "center",
            perspective: 200,
          }}
        >
          {transition((state, stage) => (
            <h1
              style={{
                fontSize: "2em",
                position: "absolute",
                transition: ".3s",
                opacity: stage === "enter" ? 1 : 0,
                transform: {
                  from: "translateX(-100%) rotateY(-60deg) scale(.5)",
                  enter: "translateX(0%)",
                  leave: "translateX(100%) rotateY(60deg) scale(.5)",
                }[stage],
              }}
            >
              {state}
            </h1>
          ))}
        </div>
        <Button onClick={() => setCount(count + 1)}>+1</Button>
      </div>
    </div>
  );
}

timeout 不起作用

https://codesandbox.io/s/transition-hook-examples-forked-cg426t?file=/src/demos/BasicTransition.jsx:223-331

如官网示例：我修改timeout，对于组件挂载没有看到有任何影响？

 const modalTrans = useTransition(showModal, 30000);
  const buttonTrans = useTransition(!showModal, 30000);

useListTransition 初始化key

如果像这样使用useListTransition(list, **300)
const keyRef = useRef(0); // change list to our list form with extra information. const initialList: Array<ItemWithState<Item>> = list.map((item, key) => ({ item, key: keyRef.current, stage: 'enter', }));
会导致key重复

Unit tests?

Hi @iamyoki - thanks for your library, this is really nice.

I have a question: how can we add unit testing for components using your hooks?

REQUEST: Callback instead of timer

First of all, love this.
Do you think is there a way to support callbacks (aka call done()) instead of using a timeout in ms?
I'm thinking it used with animation engines like gsap (or whatever)

路由过渡

请问想使组件路由有过渡目前可以做到吗

Compatibility

Hi all,

I am in a SPFx-Project with TypeScript-Version 4.5.5
I can only use React-Version 16.13.1 as the highest version, because of SPFx-Compatibility

"transition-hook": "^1.5.2"
"@types/react": "^18.0.23",
"@types/react-dom": "^18.0.7",
"react": "^16.13.1",
"react-dom": "^16.13.1"

When bundeling my component with gulp bundle --ship, I get typical errors about not existing modules due to incompatibility.

Does your component not support React-Version 16.13.1?

with kind regards, Ronny

Fast Transitions from 1 -> 2 -> 1

If you have a transition like this:

const [phase, setPhase] = useState(1)
const transition = useSwitchTransition(phase, 300, 'out-in');

and you quickly cycle form 1 -> 2 -> 1:

setPhase(2);
setPhase(1);

the output of the stage in the transition callback will be 1, leave

{transition((state, stage) => (
/* stage will be equal to 'leave' */
...

Current workaround is to add a random number to phase:
export const setFormattedPhase = (phase) => {
return ${phase}_${Math.random()};
};

export const getFormattedPhase = (stage?: phase) => {
return Number(phase?.split('_')[0]);
};

then

const [phase, setPhase] = useState(1)
const transition = useSwitchTransition(setFormattedPhase(phase), 300, 'out-in');
...
setPhase(2);
setPhase(1);

To me it seems like a key issue, and transition-hook is just reusing a component that was not finished unmounting, but kept the stage