reactjs - 为什么这个 react-spring 动画在动画期间会改变它的 margin-top?
问题描述
我有一个 react-spring 动画,它包括在滑动时使组件出现。但是在这个动画中,组件在恢复正常之前改变了它的边距顶部。如何解决这个问题?
这是代码和沙箱:
import React, { useEffect, useMemo, useState } from "react";
import styled, { css, keyframes } from "styled-components";
import { animated, useTransition } from "react-spring";
const Tabs = styled.div`
display: flex;
margin-bottom: 12px;
`;
const Tab = styled.button<{ active: boolean }>`
margin: 0 4px;
border-bottom: 1px solid transparent;
font-weight: ${({ active }) => active && 600};
cursor: pointer;
background: transparent;
border: 0;
&:focus {
outline: none !important;
}
`;
export default function Inbox() {
const [tab, setTab] = useState(0);
const transitions = useTransition(tab, (p) => p, {
from: { opacity: 0, transform: "translate3d(100%,0,0)" },
enter: { opacity: 1, transform: "translate3d(0%,0,0)" },
leave: { opacity: 0, transform: "translate3d(-50%,0,0)" }
});
const getList = (name: string) => <div>{name}</div>;
const pages = [
({ style }) => (
<animated.div style={style}>{getList("test 1")}</animated.div>
),
({ style }) => (
<animated.div style={style}>{getList("test 2")}</animated.div>
)
];
return (
<>
<Tabs>
<Tab onClick={() => setTab(0)} active={tab === 0}>
Unread
</Tab>
<Tab onClick={() => setTab(1)} active={tab === 1}>
All
</Tab>
</Tabs>
{transitions.map(({ item, props, key }) => {
const Page = pages[item];
return <Page key={key} style={props} />;
})}
</>
);
}
沙盒:https ://codesandbox.io/s/amazing-ride-hwbv2?file=/src/App.tsx
解决方案
这不是您看到的边距顶部。它是旧组件向左侧移动并改变不透明度,但它仍然存在。最后,在新组件处于垂直位置的那一刻将其卸下。大多数情况下,我们使用绝对位置,新旧组件相互重叠。这样,卸载时就没有颠簸。像这样的东西:
from: { opacity: 0, transform: "translate3d(100%,0,0)", position: "absolute" },
推荐阅读
- python - 在循环中更新 pyplot 图例
- python - 如何让 MIMEText 呈现 HTML?
- java - 为 gradle 添加实现以添加广告时出错
- symfony - 删除 Symfony4 的外键和级联问题
- javascript - 循环包含 Javascript 中的 Ajax 调用的函数
- android - 无法从 Android Studio 4.0 Canary 拉/推 git
- java - 如何使用 RESTHightLevelCient 执行包含多个字符串的搜索
- python - 将 CSV 文件转换为 HTML 并使用 Pandas 在浏览器中显示
- python - 理解 Django 应用程序依赖项的问题
- java - Bukkit - 使用自定义配方添加自定义项目