在或多或少地完成了我的第一个 React+Redux 应用程序之后，我想将动画应用到应用程序的各个部分。看看现有的解决方案，我发现没有什么比我想要的更接近的了。整体ReactCSSTransitionGroup似乎是处理动画的一种侵入性和天真的方式。动画问题会从您想要制作动画的组件中流出，而您无法了解应用程序中发生的任何事情。根据我最初的分析，我对我认为好的动画 API 提出了以下要求：
- 父组件应该不知道子组件如何淡入/淡出（交错动画除外）。
- 动画应该与 React 集成，以便允许组件在被移除之前淡出（或以其他方式完成它们的动画）。
- 应该可以在不修改组件的情况下将动画应用于组件。组件的样式可以与动画兼容，但不应该有与动画相关的props、状态、上下文或组件，动画也不应该规定组件是如何创建的。
- 应该可以根据动作和应用程序状态执行动画——换句话说，当我拥有所发生事件的完整语义上下文时。例如，我可能会在创建事物时淡入组件，但不会在页面加载其中包含该项目时淡入淡出。或者，我可能会根据用户的设置选择合适的淡出动画。
- 应该可以为组件排队或组合动画。
- 应该可以将动画与父组件排入队列。例如，如果一个组件有两个子组件，打开一个会先触发另一个关闭，然后再打开。
排队动画的细节可以由现有的动画库处理，但应该可以将其与 react 和 redux 系统联系起来。
我尝试过的一种方法是创建一个像这样的装饰器函数（它是 TypeScript，但我认为这对问题没有太大影响）：
export function slideDown<T>(Component: T) {
return class FadesUp extends React.Component<any, any> {
private options = { duration: 0.3 };
public componentWillEnter (callback) {
const el = findDOMNode(this).childNodes[0] as Element;
if (!el.classList.contains("animated-element")) {
el.classList.add("animated-element");
}
TweenLite.set(el, { y: -el.clientHeight });
TweenLite.to(el, this.options.duration, {y: 0, ease: Cubic.easeIn, onComplete: callback });
}
public componentWillLeave (callback) {
const el = findDOMNode(this).childNodes[0] as Element;
if (!el.classList.contains("animated-element")) {
el.classList.add("animated-element");
}
TweenLite.to(el, this.options.duration, {y: -el.clientHeight, ease: Cubic.easeIn, onComplete: callback});
}
public render () {
const Comp = Component as any;
return <div style={{ overflow: "hidden", padding: 5, paddingTop: 0}}><Comp ref="child" {...this.props} /></div>;
}
} as any;
}
......可以这样应用......
@popIn
export class Term extends React.PureComponent<ITermStateProps & ITermDispatchProps, void> {
public render(): JSX.Element {
const { term, isSelected, onSelectTerm } = this.props;
return <ListItem rightIcon={<PendingReviewIndicator termId={term.id} />} style={isSelected ? { backgroundColor: "#ddd" } : {}} onClick={onSelectTerm}>{term.canonicalName}</ListItem>;
}
}
不幸的是，它需要将组件定义为一个类，但它确实可以在不修改组件的情况下以声明方式向组件添加动画。我喜欢这种方法，但讨厌我必须将组件包装在转换组中 - 它也没有解决任何其他要求。
我对 React 和 Redux 的内部和扩展点了解不够，无法很好地了解如何解决这个问题。我认为 thunk 动作是管理动画流的好地方，但我不想将动作组件发送到动作中。相反，我希望能够检索操作或类似操作的源组件。另一个角度可能是一个专门的减速器，它同时传入动作和源组件，允许您以某种方式匹配它们并安排动画。
所以我想我所追求的是以下一项或多项：
- 挂钩 React 和/或 Redux 的方法，最好不要破坏性能或违反库的基本假设。
- 是否有任何现有的库可以解决部分或所有这些问题，并且很容易集成到应用程序中。
- 通过使用普通动画工具或很好地集成到普通构建块中来实现所有或大部分这些目标的技术或方法。