新手发文章。文章是在看到翻书效果动画后自己结合别人的例子实现的翻书效果,发文章记录以下。以后如果有机会用上,可以参考此文章。
首先是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