- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在开发轮播应用程序,我必须使用 React Transition Group动画它。出于某种原因,我似乎无法正确应用这些类。
它混合了专有代码和开源代码,所以如果这个示例还不够,我很乐意扩展我的示例。
React render() 调用这个:
{this.props.slides.map((slide, index) => (
<CSSTransition
key={this.index}
in={this.appearHome}
appear={true}
timeout={600}
classNames="carouselTransition"
>
<CarouselSlide
key={index}
index={index}
activeIndex={this.state.activeIndex}
slide={slide}
/>
</CSSTransition>
))}
然后 css 看起来像这样:
/* appear on page load */
.carouselTransition-appear {
opacity: 0;
z-index: 1;
}
.carouselTransition-appear.carouselTransition-appear-active {
opacity: 1;
transition: opacity 600ms linear;
}
.carouselTransition-enter {
opacity: 0;
z-index: 1;
}
.carouselTransition-enter.CarouselTransition-enter-active {
opacity: 1;
transition: opacity 300ms linear;
}
.carouselTransition-exit {
opacity: 1;
}
.carouselTransition-exit.carouselTransition-exit-active {
opacity: 0;
transition: opacity 300ms linear;
}
.carouselTransition-exit-done {
opacity: 0;
}
appear
css 适用,但当我循环旋转木马时,我可以看到 enter
和 exit
类从 div 中脱落,永远不会返回。我怀疑我对 key={index}
做错了什么,我读过它是一种反模式,但我不确定如何修复它。
同样,如果需要更多代码,请说出来!
最佳答案
使用它是一件棘手的事情,正如我从几乎所有我寻求帮助的地方都听到的那样。他们需要处理文档并构建一些更好的示例!无论如何,CSS 只是把正确的东西放在了错误的地方。具体来说,我在完成状态下尝试做的事情需要在事件状态下完成,而我在事件状态下尝试做的事情需要在进入状态下完成。
.carouselTransition-appear {
opacity: 1;
}
.carouselTransition-appear.carouselTransition-appear-active {
}
.carouselTransition-enter {
transform: translateX(110%);
}
.carouselTransition-enter.carouselTransition-enter-active {
transition: transform 600ms ease-in-out;
transform: translateX(0);
}
.carouselTransition-enter.carouselTransition-enter-done {
}
.carouselTransition-exit {
transform: translateX(0);
}
.carouselTransition-exit.carouselTransition-exit-active {
transition: transform 600ms ease-in-out;
transform: translateX(-100%);
}
.carouselTransition-exit-done {
left: -10000px;
opacity: 0;
height: 0px;
}
关于javascript - React CSSTransition 没有正确应用类,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52882135/
我可能会误解这整件事,但我正在尝试使用 React 和 React Transition Group 制作一些 css 动画。 但是对于我下面的代码,退出动画 不会为嵌套的(最后一个)CSSTrans
我有一个 React 组件的动画,我无法运行它。 我认为过渡有问题,因为如果我只是一个不透明度的动画,一切都很好 我正在使用 react-transition-group 中的 CSSTransiti
我想在初始安装组件时或之后为 div 设置动画(淡入)。动画完成后,div 不应消失。我正在尝试使用 CSSTransition 组件并查看 reactcommunity.org 上的示例,但我根本无
我已经安装了 react-transition-group 并通过以下方式调用它: import { CSSTransition, TransitionGroup } from 'react-tran
我正在尝试使用 npm 包 react-transition-group 制作一个滑出式抽屉。无论出于何种原因,我似乎无法让抽屉在单击附加条件按钮时从左向右滑出。如果您可以在不使用该软件包的情况下解决
更新: 对于那些面临同样问题的人:我在 ReactTransitionGroup 的 git 页面上发现了类似的问题,其中有解决方案:https://github.com/reactjs/react-
有两页。进入页面动画正常,退出页面突然卡住了。 这是版本: "react-router-dom": "^4.2.2", “ react 过渡组”:“^4.0.1”, “ react ”:“^16.4.
使用 CSSTransition 组件和 React 我想应用淡入动画 在这里你可以找到我想要实现的一个小例子:https://codesandbox.io/s/j75712qjvy 在第一次加载时,
使用 CSSTransition 组件和 React 我想应用淡入动画 在这里你可以找到我想要实现的一个小例子:https://codesandbox.io/s/j75712qjvy 在第一次加载时,
我想在我的网络应用程序中为一个框设置动画(淡入、淡出)。我正在使用 react-transition-group为了这。但不知何故,动画不起作用。代码 import React from 'react
我正在开发轮播应用程序,我必须使用 React Transition Group动画它。出于某种原因,我似乎无法正确应用这些类。 它混合了专有代码和开源代码,所以如果这个示例还不够,我很乐意扩展我的示
我试图让登录组件在加载页面时淡入,然后在呈现新组件时淡出。根本没有褪色发生,它只是出现。我在其他帖子中读到您需要一个 key ,但我不知道在这种情况下 key 值是什么? return (
我正在尝试使用CSSTransitionGroup(或ReactTransitionGroup)为内容在dom中出现和消失时创建垂直平滑滚动效果。 我知道使用纯 css 中的过渡来动画化这种效果的方法
尝试将 CSSTransition 添加到我的 React 应用程序中,但我遇到了这个问题。当我说唱我想要动画的元素时,它会变成空白。任何帮助,将不胜感激。这是我的代码 render() {
我正在尝试在我的元素中实现一个模态的 CSSTransition。问题是我正在使用 css 模块。 我的模态渲染方法 render() { return (
我正在从 React 调用 CSS Transition Group 属性。 在我的 js 文件中: var ReactCSSTransitionGroup = React.addons.CSSTra
“ react ”:“^16.13.1” “ react 过渡组”:“^4.3.0” 大家好。 我遇到了 findDOMNode 警告,在互联网上找不
因此,我有一小部分代码尝试添加一个动画作为 Tooltip Nodes 的包装器。但也许我做错了什么,因为我在屏幕上没有看到 mount 期间出现任何 animation。 此外,它甚至不会在 onE
我正在开发一个为图像提供交替 src 值的轮播。这确实有效,但是我无法让 React CSSTransition 正常工作,因为从技术上讲,它是同一个元素,只是具有绑定(bind)到状态变量的不断变化
我正在开发一个 React 小部件(分步向导),它从 API 获取和显示内容。我不知道,我从 API 获取的文本有多长。所以我不知道,小部件的高度。小部件应增加与内容相关的高度(如默认的 HTML 元
我是一名优秀的程序员,十分优秀!