Question

我正在尝试使用React-spring安装/卸载组件时创建动画：

<script type="text/javascript">

if (screen.width >= 768) {
    <?= wp_video_shortcode($teaserAttr); ?>
} else {
   ...
}

</script>

但这是行不通的，并且出现错误import { Transition, animated } from 'react-spring' ... export class CompName extends PureComponent<CompNamePropsType> { static defaultProps = { isExpanded: false, } render() { const { isExpanded, ...props } = this.props return ( <section className={styles.block} {...props}> <Transition from={{ opacity: 0 }} enter={{ opacity: 1 }} leave={{ opacity: 0 }}> {isExpanded && (style => ( <animated.div style={{ ...style, background: "orange" }}> <AnotherComp /> </animated.div> ))} </Transition> </section> ) } }。我做错了什么，如何使用react-spring包装器在组件安装/卸载上创建动画？

Answer 1

正确的方法是：

<Transition items={isExpanded} native from enter leave>
  {isExpanded => isExpanded && (props => <animated.div style={props} />)
</Transition>

其中的项目可以像您的情况一样是单个项目，然后对出现的项目进行处理。原因是过渡将保留它，即使实际状态发生变化，它仍可以安全地将元素从“旧”状态过渡出去。

此处说明了api：react-spring.io/docs/props/transition

react-spring单组件安装/卸载显示

1 个答案: