react 翻书效果_transition、class名称、React实现无限反复翻书效果
新手发文章。文章是在看到翻书效果动画后自己结合别人的例子实现的翻书效果，发文章记录以下。以后如果有机会用上，可以参考此文章。首先是React的JSX页面结构：//一页paper包含2面图片// 根据状态中 atLeft数组是否包含页码数判断页面paper翻到了左边还是右边。 -1 ? 'left' : 'right'].join(' ')}> -1 ? 'left' : 'right']..
新手发文章。文章是在看到翻书效果动画后自己结合别人的例子实现的翻书效果，发文章记录以下。以后如果有机会用上，可以参考此文章。
首先是React的JSX页面结构：
// 一页paper包含2面图片
// 根据状态中 atLeft数组是否包含页码数判断页面paper翻到了左边还是右边。
-1 ? 'left' : 'right'].join(' ')}>上面给包裹img的div加上translateZ(*px)时为了防止翻页后图片显示的问题，如不加会使翻过去的正面图像显示在反面上。
然后是样式文件：
.paper{
position: absolute;
transition: transform 1s;
transform-style: preserve-3d;
}
.pic{
position: absolute;
right: 0px;
}
.left{
transform-origin: left center;
transform: perspective(1000px) rotateY(0deg);
}
.right{
transform-origin: left center;
transform: perspective(1000px) rotateY(180deg);
}
最后是其他部分内容：
state = {
degree: 0,
atLeft: [],
to: 1,
}
componentDidMount (){
let timer = null
clearInterval(timer)
let i = 1
// 创建定时器为每页paper切换class名，左翻时方向变量to为:1,右翻时方向变量to为：-1
timer = setInterval(() => {
if(this.state.to === 1){
if (i <= 4){
let newAtLelft = this.state.atLeft
newAtLelft.push(i)
this.setState({
atLeft: newAtLelft
})
i++
}
// 右翻时 i等于 5时就要改变方向
if(i === 5){
this.setState({
to: -1
})
}
} else{
if (i >= 1) {
let newAtLelft = this.state.atLeft
newAtLelft.pop(i)
this.setState({
atLeft: newAtLelft
})
i--
}
// 注意： 左翻时包含页码i的数组atLeft删除到1时就需要改变方向
if(i === 1){
this.setState({
to: 1
})
}
}
},3000)
}
完整组件类
export default class App extends React.Component {
state = {
degree: 0,
atLeft: [],
to: 1,
}
componentDidMount (){
setInterval(() => {
this.setState({
degree: this.state.degree + 90
})
}, 3000)
let timer = null
clearInterval(timer)
let i = 1
timer = setInterval(() => {
if(this.state.to === 1){
if (i <= 4){
let newAtLelft = this.state.atLeft
newAtLelft.push(i)
this.setState({
atLeft: newAtLelft
})
i++
}
if(i === 5){
this.setState({
to: -1
})
}
} else{
if (i >= 1) {
let newAtLelft = this.state.atLeft
newAtLelft.pop(i)
this.setState({
atLeft: newAtLelft
})
i--
}
if(i === 1){
this.setState({
to: 1
})
}
}
},3000)
}
render () {
- -1 ? 'left' : 'right'].join(' ')}>
- -1 ? 'left' : 'right'].join(' ')}>
- -1 ? 'left' : 'right'].join(' ')}>
- -1 ? 'left' : 'right'].join(' ')}>
}
第一次发文章，文章有点乱，有问题请大佬们指出，谢谢。
keniran
发布了1 篇原创文章 · 获赞 0 · 访问量 22
私信
关注
标签：right,join,atLeft,newAtLelft,transition,React,state,class,left
来源： https://blog.csdn.net/keniran/article/details/104410808
腾讯云面向开发者汇聚海量精品云计算使用和开发经验，营造开放的云计算技术生态圈。
更多推荐
0
0- 0
已为社区贡献1条内容
所有评论(0)