- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我创建了一个包装器组件以通过字符串提供类名列表以支持 Tailwind 实用程序转换。这旨在嵌套在 TransitionGroup 组件中以支持多个项目的动画,例如列表。
我可以很好地制作出动画,但输入无效。你能帮我找出这段代码中的错误吗?
react 16.13.1 react 过渡组 4.4.1
沙盒:https://codesandbox.io/s/delicate-feather-ymozq
(登录那里查看 div 引用,以防类未被应用,但它们似乎工作正常)
import React, { ReactNode } from "react";
import { Transition as ReactTransition } from "react-transition-group";
interface TransitionProps {
in?: boolean;
timeout: number;
enter?: string;
enterFrom?: string;
enterTo?: string;
leave?: string;
leaveFrom?: string;
leaveTo?: string;
children: ReactNode;
}
export function CSSTransition(props: TransitionProps) {
const { enter, enterFrom, enterTo, leave, leaveFrom, leaveTo } = props;
const nodeRef = React.useRef<HTMLDivElement>(null);
const enterClasses = splitClasses(enter);
const enterFromClasses = splitClasses(enterFrom);
const enterToClasses = splitClasses(enterTo);
const leaveClasses = splitClasses(leave);
const leaveFromClasses = splitClasses(leaveFrom);
const leaveToClasses = splitClasses(leaveTo);
function splitClasses(string: string | undefined): string[] {
if (string) return string.split(" ").filter((s) => s.length);
return [];
}
function addClasses(classes: string[]) {
nodeRef.current?.classList.add(...classes);
}
function removeClasses(classes: string[]) {
nodeRef.current?.classList.remove(...classes);
}
return (
<ReactTransition
in={props.in}
nodeRef={nodeRef}
timeout={props.timeout}
unmountOnExit
onEnter={() => {
console.log("onEnter", nodeRef);
addClasses([...enterClasses, ...enterFromClasses]);
}}
onEntering={() => {
console.log("onEntering", nodeRef);
removeClasses(enterFromClasses);
addClasses(enterToClasses);
}}
onEntered={() => {
console.log("onEntered", nodeRef);
removeClasses([...enterToClasses, ...enterClasses]);
}}
onExit={() => {
console.log("onExit", nodeRef);
addClasses([...leaveClasses, ...leaveFromClasses]);
}}
onExiting={() => {
console.log("onExiting", nodeRef);
removeClasses(leaveFromClasses);
addClasses(leaveToClasses);
}}
onExited={() => {
console.log("onExited", nodeRef);
removeClasses([...leaveToClasses, ...leaveClasses]);
}}
>
<div ref={nodeRef}>{props.children}</div>
</ReactTransition>
);
}
最佳答案
在 CSSTransition.tsx
中,更改
import { Transition as ReactTransition } from "react-transition-group";
到
import { CSSTransition as ReactTransition } from "react-transition-group";
Tailwind 类名依赖于 CSS 动画。
Transition
并非设计用于 CSS 动画,因为 onEnter
和 onEntering
方法的调用速度如此之快以至于 DOM 重绘(a动画的帧)不会出现在它们之间。因此,您为 enterTo
设置的所有类都会立即应用,没有任何机会过渡到它们。
CSS Transition
另一方面,在创建元素时添加一个 -enter
类,然后添加一个 -enter-active
< strong>在下一个刻度/帧上。最后,在超时之后,它删除所有类,除了添加 -done
类。
-enter
和-enter-active
类之间的转换是允许 CSS 转换发生的关键。在这些类之间添加一个刻度/帧,允许库强制重绘。此重绘强制 onEntering
类按预期过渡到 onEntered
类。
换句话说,Transition
立即切换到 enterTo
状态,而 CSSTransition
在类切换之间给出一帧,这是允许动画发生。
DOM 通常以每秒最多 60 帧的速度进行动画/更改(取决于实现/最终用户屏幕刷新率),每帧留出 16 毫秒;它不关心这 16 毫秒之间发生了什么。如果类更改后的最终状态是您的 enterTo
状态而不是您的 enterFrom
状态,它将忽略 enterFrom
状态,因此永远不会向您显示顺风动画。
关于javascript - 输入时动画不起作用(Tailwind、TransitionGroup、Typescript),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/62295326/
我正在尝试让一个简单的“抽屉”组件工作以测试 React's TransitionGroups .到目前为止我所拥有的JSBin .如果您尝试运行它,它可以运行,但我收到错误: 未捕获的类型错误:无法
正如我在标题中所写,我正在尝试构建自己的选项卡组件。到目前为止,它是非常基础的: Tabs.vue setup(props, { slots }) { const { activeTab } =
我遇到一个问题,TransitionGroup 没有从 DOM 中删除所有元素。 我想在 2 和 4 个元素之间切换。但是,对于 TransitionGroup,它总是在 3 和 4 元素之间切换。我
我创建了一个包装器组件以通过字符串提供类名列表以支持 Tailwind 实用程序转换。这旨在嵌套在 TransitionGroup 组件中以支持多个项目的动画,例如列表。 我可以很好地制作出动画,但输
我正在使用 React Router 和 React Transition Group 在路由之间设置动画。我使用 时遇到问题成分。该应用程序可以运行,但我从 React Router 收到多个警告
我在 React 中遇到了 TransitionGroup 的奇怪问题。第一次,我设法创建了卡住并且不根据状态值进行更新的组和组件。 有一个组件 (A) 始终具有 TransitionGroup。当状
所以我不明白为什么人们喜欢以不同的方式调用 React Transition Functions TransitionGroup: import TransitionGroup from 'react
我正在开发一个 React 小部件(分步向导),它从 API 获取和显示内容。我不知道,我从 API 获取的文本有多长。所以我不知道,小部件的高度。小部件应增加与内容相关的高度(如默认的 HTML 元
我正在使用 React TransitionGroup 和 Velocity 为路由之间的转换设置动画。 我正在尝试制作一个简单的动画,其中目标路由组件从左侧滑入,源路由从右侧滑出。 我现在正在运行该
我正在查看 firebaseUI auth project 我看到一些 TextInputLayouts 引用了 transitionName 和 transitionGroup 但我在网上找不到任何
我从旧的 CSSTransitionGroup 迁移到新的 react-transition-group CSSTransition 和 TransitionGroup。 我正在创建(破解)一个叠加层
我正在关注 Chang Wang 的使用 HOC 和 ReactTransitionGroup 进行可重用 React 转换的教程。 ( Part 1 Part 2 ) 与 Huan Ji 关于页面转
考虑一个用例:一个内部有文本的 block (文本是从存储中获取的)。当文本更改时 - block 会平滑消失并出现另一个 block 。 为了更好地说明伪代码: import TransitionG
我是一名优秀的程序员,十分优秀!