CSS3实现类似翻书效果的过渡动画的示例代码

<div class="flap-card" v-for="(item, index) in flapCardList" :key="index" :style="{zIndex: item.zIndex}"> <div class="flap-card-circle"> <div class="flap-card-semi-circle flap-card-semi-circle-left" :style="semiCircleStyle(item, 'left')" ref="left"></div> <div class="flap-card-semi-circle flap-card-semi-circle-right" :style="semiCircleStyle(item, 'right')" ref="right"></div> </div> </div> data() { return { front: 0, back: 1, } }, methods: { // flapCardList是存储着图片信息的对象数组，通过v-for循环和semiCircleStyle方法设置5组图片的背景。 semiCircleStyle(item, dir) { return { backgroundColor: `rgb(${item.r}, ${item.g}, ${item.b})`, backgroundSize: item.backgroundSize, backgroundImage: dir === 'left' ? item.imgLeft : item.imgRight } }, rotate(index, type) { //卡牌翻转，"front"选择右边卡片，否则选择左边卡片；然后改变dom元素的样式 const item = this.flapCardList[index] let dom if (type === 'front') { dom = this.$refs.right[index] } else { dom = this.$refs.left[index] } dom.style.transform = `rotateY(${item.rotateDegree}deg)` dom.style.backgroundColor = `rgb(${item.r}, ${item._g}, ${item.b})` }, flapCardRotate() { //首先是翻转函数，每次翻转分正反两面。当动画至90°时，改变背面的z-index值，每一帧动画完毕执行rotate函数以改变样式。 const frontFlapCard = this.flapCardList[this.front] const backFlapCard = this.flapCardList[this.back] frontFlapCard.rotateDegree += 10 frontFlapCard._g -= 5 backFlapCard.rotateDegree -= 10 if (backFlapCard.rotateDegree < 90) { backFlapCard._g += 5 } if (frontFlapCard.rotateDegree === 90 && backFlapCard.rotateDegree === 90) { backFlapCard.zIndex += 2 } this.rotate(this.front, 'front') this.rotate(this.back, 'back') if (frontFlapCard.rotateDegree === 180 && backFlapCard.rotateDegree === 0) { this.next() } }, prepare() { const backFlapCard = this.flapCardList[this.back] backFlapCard.rotateDegree = 180 backFlapCard._g = backFlapCard.g - 5 * 9 this.rotate(this.back, 'back') }, next() { const frontFlapCard = this.flapCardList[this.front] const backFlapCard = this.flapCardList[this.back] frontFlapCard.rotateDegree = 0 backFlapCard.rotateDegree = 0 frontFlapCard._g = frontFlapCard.g backFlapCard._g = backFlapCard.g this.rotate(this.front, 'front') this.rotate(this.back, 'back') this.front++ this.back++ const len = this.flapCardList.length if (this.front >= len) { this.front = 0 } if (this.back >= len) { this.back = 0 } // 动态设置zIndex // 100 -> 96 // 99 -> 100 // 98 -> 99 // 97 -> 98 // 96 -> 97 // (0 - 1 + 5) % 5 = 4 // (1 - 1 + 5) % 5 = 0 this.flapCardList.forEach((item, index) => { item.zIndex = 100 - ((index - this.front + len) % len) }) this.prepare() }, startFlapCardAnimation() { this.prepare() this.task = setInterval(() => { this.flapCardRotate() }, this.intervalTime) }, stopAnimation() { //动画停止时，清除所有setTimeout；否则再次进入动画出现错误。 if (this.task) { clearInterval(this.task) } if (this.timeout) { clearTimeout(this.timeout) } if (this.timeout2) { clearTimeout(this.timeout2) } this.reset() }, runAnimation() { //点击推荐，则动画开始（vuex中定义了flapCardVisible，watch监听其变化，为TRUE则动画开始） this.runFlapCardAnimation = true this.timeout = setTimeout(() => { this.startFlapCardAnimation() this.startPointAnimation() }, 300) this.timeout2 = setTimeout(() => { this.stopAnimation() //2500ms过渡动画结束，推荐图书显示 this.runBookCardAnimation = true }, 2500) }, watch: { flapCardVisible(v) { if (v) { this.runAnimation() } } }, }

（编辑：新余站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!