gpt4 book ai didi

reactjs - ReactCSSTransitionGroup 只适用于新组件中的动画?

转载 作者:行者123 更新时间:2023-12-03 13:22:26 25 4
gpt4 key购买 nike

我的 ReactCSSTransitionGroup 工作正常(我认为),新安装的组件会逐渐显现出它的所有荣耀。

问题是被替换的组件突然消失,这对我来说是一个问题,因为最终我希望我的组件在视口(viewport)中进出……

我似乎没有看到任何方法告诉离开组件如何优雅地消失。

我是否遗漏了什么,或者 ReactCSSTransitionGroup 只能对传入组件进行动画处理?

更新

代码如下:

import React from "react";
import ReactDOM from "react-dom";
import { Router, Route, IndexRoute, hashHistory, Link } from "react-router";
import ReactCSSTransitionGroup from "react-addons-css-transition-group";


class PageOne extends React.Component {
render() {
return (
<ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={500}>
<div>
HI FROM PAGE ONE<br />
<br />
<Link to="two">Take me to Page Two</Link>
</div>
</ReactCSSTransitionGroup>
);
}
}
class PageTwo extends React.Component {
render() {
return (
<ReactCSSTransitionGroup transitionName="example" transitionAppear={true} transitionAppearTimeout={500} transitionEnterTimeout={500} transitionLeaveTimeout={500}>
<div>
HELLO FROM PAGE TWO<br />
<br />
<Link to="/">Go back to Page One</Link>
</div>
</ReactCSSTransitionGroup>
);
}
}


const app = document.getElementById('app');
ReactDOM.render(
<Router history={hashHistory}>
<Route path="/" component={PageOne}></Route>
<Route path="two" component={PageTwo}></Route>
</Router>,
app);

还有 CSS:

.example-enter {
opacity: 0.01;
}
.example-enter.example-enter-active {
opacity: 1;
transition: opacity 500ms ease-in;
}
.example-leave {
opacity: 1;
}
.example-leave.example-leave-active {
opacity: 0.01;
transition: opacity 300ms ease-in;
}

最佳答案

好吧,看起来他们已经解决了,只是我直到现在才发现。

React-Router git 存储库有一个示例列表,其中有一个“动画”。此演示展示了如何通过克隆元素并分配键来利用 ReactCSSTransitionGroup 为输入/输出“页面”设置动画。

https://reacttraining.com/react-router/web/example/animated-transitions

关于reactjs - ReactCSSTransitionGroup 只适用于新组件中的动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35850324/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com