gpt4 book ai didi

reactjs - React-Pose 动画退出问题

转载 作者:行者123 更新时间:2023-12-03 13:53:39 24 4
gpt4 key购买 nike

我正在使用react-pose使窗口内和窗口外的通知动画化。

“进入”过渡非常流畅,但是退出时 - 动画非常激进。

有人遇到过这个问题吗?我可以在任何地方上传视频屏幕截图来说明问题(除了 YouTube)。

这是我的代码:

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import posed, { PoseGroup } from "react-pose";

import classNames from 'classnames';
import "./index.scss";

import key from 'keymaster';
import Notification from '../../components/Notification';

const NotificationPose = posed.div({
enter: {
opacity: 1,
x: '0%',
transition: {
duration: 300,
ease: 'easeIn'
}
},
exit: {
opacity: 0,
x: '100%',
transition: {
duration: 500,
ease: 'easeOut'
}
}
});

class NotificationCentre extends Component {

static propTypes = {
notifications: PropTypes.array,
};
static defaultProps = {
notifications: []
};

constructor(props) {
super(props);
this.className=this.keyScope='NotificationCentre';
}
render(){
return (
<div className={`${this.className}`}>
<PoseGroup>
{
this.props.notifications.map((d, i) => {
return (
<NotificationPose key={`notification-anim-${i}`}>
<Notification
key={`notification-${i}`}
active={false}
{...d}/>
</NotificationPose>

);
})
}
</PoseGroup>
</div>
);
}
}

const mapDispatchToProps = dispatch => ({});
const mapStateToProps = state => ({
tvShowsList: state.tvShows.fetchingTVShowsListHasSucceeded,
});

export default connect(mapStateToProps, mapDispatchToProps)(NotificationCentre);

最佳答案

PosedGroup 要求每个子项都有唯一的关键属性来跟踪进入和退出子项。

如文档中所示 ( Here )

Every child must be provided a unique key property for PoseGroup to track entering and exiting children.

避免使用数组索引作为键,因为输入的新元素将与删除的元素具有相同的键。相反,使用唯一的 ID,例如 notification.id,它将正常工作。

关于reactjs - React-Pose 动画退出问题,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52692127/

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