新手发文章。文章是在看到翻书效果动画后自己结合别人的例子实现的翻书效果，发文章记录以下。以后如果有机会用上，可以参考此文章。

首先是React的JSX页面结构：

上面给包裹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 () {

}

第一次发文章，文章有点乱，有问题请大佬们指出，谢谢。

keniran

发布了1 篇原创文章 · 获赞 0 · 访问量 22

私信

关注

标签：right,join,atLeft,newAtLelft,transition,React,state,class,left

来源： https://blog.csdn.net/keniran/article/details/104410808