gpt4 book ai didi

javascript - react "react-transition-group"不起作用

转载 作者:太空宇宙 更新时间:2023-11-03 22:41:15 24 4
gpt4 key购买 nike

我正在将我的元素迁移到 React 的最新版本,我看到 ReactCSSTransitionGroupdeprecated ... 所以我使用 recomended package由 React 开发者提供。当我使用 ReactCSSTransitionGroup 时,动画在组件呈现时正常工作,但使用此包时,组件不工作且不设置动画。

我做了一个简单的例子来测试,但是没有用...怎么了?

react 代码:

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import CSSTransitionGroup from 'react-transition-group/CSSTransitionGroup';

class App extends Component {
render() {
return (
<CSSTransitionGroup
transitionName="example"
transitionAppear={true}
transitionAppearTimeout={3000}
transitionEnter={true}
transitionEnterTimeout={3000}
transitionLeave={false}>

<div id="container">
Animation test
</div>

</CSSTransitionGroup>
);
}
}

ReactDOM.render(
<App />,
document.getElementById('app')
);

CSS 代码:

.example-enter {
opacity: 0.01;
border: 1px solid red;
}
.example-enter.example-enter-active {
opacity: 1;
transition: all 2s ease 0s;
border: 1px solid orange;
}
.example-leave {
opacity: 1;
border: 1px solid green;
}
.example-leave.example-leave-active {
opacity: 0.01;
transition: all 3s ease 0s;
border: 1px solid blue;
}

最佳答案

来自文档:“您必须为 CSSTransitionGroup 的所有子项提供 key 属性,即使只呈现单个元素也是如此。这就是 React 确定哪些子项已进入、离开或停留的方式。”

此外,您还应该检查您的 css 类名并添加“出现”前缀,如果您想要在初始挂载期间使用动画:

.example-appear {
opacity: 0.01;
border: 1px solid red;
}
.example-appear.example-appear-active {
opacity: 1;
transition: all 2s ease 0s;
border: 1px solid orange;
}

关于javascript - react "react-transition-group"不起作用,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43869251/

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