reactjs - 如何将 react 弹簧钩与 react 一起使用。基本代码不起作用
问题描述
动画只是不适用于此代码。我究竟做错了什么?
import React from 'react'
import { useSpring, animated } from 'react-spring'
function Comp1() {
const props = useSpring({ opacity: 1, from: { opacity: 0 } })
return (
<animated.div style={c1Style}>
<h1 style={{ color: "white" }}>Component 1</h1>
<p>It is a long established fact that a reader will be distracted
by the readable content of a page when looking at its layout.
The point of using Lorem Ipsum is that it has a more-or-less
normal distribution of letters, as opposed to using 'Content here,
content here', making it look like readable English. </p>
</animated.div>
)
}
const c1Style = {
background: 'steelblue',
color: 'white',
padding: '1.5rem'
}
export default Comp1
解决方案
您还需要将弹簧动画添加props
到 animation.div 样式:
function Comp1() {
const props = useSpring({ opacity: 1, from: { opacity: 0 } })
return (
<animated.div style={{...c1Style, ...props }}>
<h1 style={{ color: "white" }}>Component 1</h1>
<p>It is a long established fact that a reader will be distracted
by the readable content of a page when looking at its layout.
The point of using Lorem Ipsum is that it has a more-or-less
normal distribution of letters, as opposed to using 'Content here,
content here', making it look like readable English. </p>
</animated.div>
)
}
推荐阅读
- odoo-12 - 无法在odoo中确认销售订单
- php - 如何从 Microsoft Graph API 获取刷新令牌
- ios - PHAsset Null 但本地标识符有效
- java - 如何检查 Currency.getAvailableCurrencies() 是否包含我的字符串值?
- java - 怎么会有 reflect.field 库中一个 Field 的值?
- javascript - 在继续执行脚本之前获取函数的结果
- excel - Power Query:合并一个文件中的两个表并为一个文件夹中的所有文件重复过程?
- python - Why is python interpreter not working on Zeppelin 0.8.0 for any of my notebooks?
- javascript - 单击按钮侦听器后如何调用预加载?
- shopware - Shopware 默认产品滑块的附加条件