Я использую useTransition
из react spring
, чтобы построить отображение анимированных слов в виде каменной сетки для блога. Моя работа в значительной степени основана на официальной демонстрации codeandbox от react spring для каменной сетки, которую можно найти здесь: https://codesandbox.io/embed/26mjowzpr
Мои работы можно найти здесь: https://codesandbox.io/s/qrzn-issue-2-david-byrne-8s7bo?file=/src/App.js:1267-1293
Что вы заметите в моем окне с кодами, так это то, что если вы нажмете на одну из маленьких головок внизу, произойдет переход, но затем страница будет повторно отображена примерно 20 раз, и я не могу понять, почему.
Я думаю, это как-то связано с моим вызовом useTransition
, но я совершенно не понимаю
const leftTransitions = useTransition(leftGridItems, item => item.word, {
from: ({ xy, width, height }) => {
return {
xy: [xOffset, yOffset],
width,
height,
opacity: 0
};
},
enter: ({ xy, width, height }) => ({ xy, width, height, opacity: 1 }),
update: ({ xy, width, height }) => ({ xy, width, height }),
leave: ({ xy, width, height }) => {
return {
xy: [xOffset, yOffset],
opacity: 0
};
},
config: { mass: 5, tension: 500, friction: 100 },
trail: 25
});