- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我的 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/
我的 ReactCSSTransitionGroup 工作正常(我认为),新安装的组件会逐渐显现出它的所有荣耀。 问题是被替换的组件突然消失,这对我来说是一个问题,因为最终我希望我的组件在视口(vie
我有一个相对简单的用例,涉及一组按钮,每个按钮代表一个类别。 当单击这些类别按钮之一时,其相应的子类别将出现在下面的部分中。当您单击这些类别按钮之一时,子类别列表将替换为新的子类别,具体取决于您刚刚单
我正在尝试向我使用ajax请求加载的文章列表的每个列表项添加动画。这是我的文章列表组件,但 ReactCSSTransitionGroup 元素对其应用的项目没有影响:它不添加类。 import Re
我在使用 ReactCSSTransitionGroup 时遇到了一些问题。当用户单击页面上的按钮时,我想显示某种带有一些精美动画的模态形式。这是代码: import React from 'reac
我一直在尝试弄清楚如何在滚动时触发 react css 过渡组。假设我有一堆组件,这个例子在屏幕外呈现: //组件.jsx import React from 'react' import React
我可以将 react-addons-css-transition-group 中的 ReactCSSTransitionGroup 与 React 内联样式一起使用吗?如果是,怎么办? 我正在处理的组
我正在尝试为一些基于状态 Prop 隐藏/显示的内容创建一个简单的“向下滑动”动画。内容是动态的,所以高度是未知的。 这是我试过的。另见 code sandbox import React from
我想更新表格单元格 ReactCSSTransitionGroup 中的值,并在实时更改值时以视觉方式显示动画,但有问题:表格行似乎没有更新,而多个 div 有显示差异: http://jsfiddl
我无法让 -leave 动画与 ReactCSSTransitionGroup 一起工作。我有以下代码: {React.cloneElement(children, { key: pat
正确应用输入动画。组件似乎在应用任何离开、离开事件类之前卸载。 componentWillMount() { this.setState({ routes: [()
ReactCSSTransitionGroup 除了延迟我想要显示的元素外,对我没有任何作用。我试图让我的组件在页面加载时淡入。这是有问题的代码: import React from 'react';
我在路线之间添加动画没有问题。但是当我尝试如下简单的事情时: var IntroSection = React.createClass({ render: function(){ return
我正在创建一个图像轮播,从右到左动画图像。这似乎是工作期望的平滑度。有一些锯齿状的动画,我不知道如何让它变得完美。我创建了一个 fiddle ,它在那里似乎比在我的网站上工作得更好。我认为图像的高度和
我在组件的 render() 函数中有这段代码: .. testing animations! .. 我的 CSS 文件中有这段代码: .testing-enter { animati
我正在尝试使用 ReactCSSTransitionGroup 为我的状态中的项目数组设置动画。 appear 和 enter 类工作正常,但 leave 类不会触发。我正在使用 删除我的 reduc
是否可以指定 ReactCSSTransitionGroup 中项目的顺序? 考虑一个其顺序很重要的项目列表。如果您想通过一个操作显示一项并隐藏其相邻项,ReactCSSTransitionGroup
我有一个 Bootstrap 列表组,其中包含多个项目和一个过滤器文本框。当同时在组中添加或删除多个项目时,这些项目会重新排序。 在删除的情况下,所有剩余的项目都会移到顶部,而删除的项目会向下移动以实
我正在尝试在我的 React/Redux 应用程序中设置路由更改的动画转换。我一直在使用 SO 上的示例和官方教程作为指南,但到目前为止只能在第一次加载时获得淡入淡出效果。更改路线时,组件显示时没有任
我有一个使用 React 的新 ReactJS 应用 starter kit .我正在尝试使用 ReactCSSTransitionGroup 在 View 之间制作动画,但未添加动画类。我错过了什么
我正在尝试实现 ReactCSSTransitionGroup 并遵循 React 网站上的示例。我正在使用 React 0.14-rc1,出于某种原因 ReactCSSTransitionGroup
我是一名优秀的程序员,十分优秀!